vite项目配置less全局样式的实现步骤
更新时间：2024年02月26日 11:51:44 作者：bug别找我
最近想实现个项目,需要配置全局less,本文主要介绍了vite项目配置less全局样式的实现步骤,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
前言
博主最近学习在vite项目中配置less，通过less去配置项目的全局样式，下面是配置步骤
一、安装依赖
首先项目中安装less和less-loader依赖
npm install less npm install less-loader
二、使用步骤
1.配置vite.config.js
在vite.config.js配置less全局样式，在additionalData里配置全局样式文件路径,文件类型是less,文件位置放在静态文件目录assets下
css: {
// css预处理器
preprocessorOptions: {
less: {
charset: false,
additionalData: '@import "./src/assets/style/global.less";',
},
},
},
2.全局样式编写
在全局样式文件里配置主色调 （其他样式如高宽，间距可自行编写）
@color:#63C4D4;
3.组件使用
在有需要的组件内使用该全局样式
.title{
color:@color;
}
总结
这就在vite项目中配置less全局样式的步骤，更多相关vite配置less全局样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue+elementUI实现表格关键字筛选高亮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
vue的axios请求改变content-type为form-data问题
这篇文章主要介绍了vue的axios请求改变content-type为form-data问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
element-ui table组件如何使用render属性的实现
这篇文章主要介绍了element-ui table组件如何使用render属性的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要介绍了Vue动态组件表格的实现代码,包括框架结构组件，文中还给大家封装了几个组件，有按钮组件、图片组件、滑动开关，结合示例代码给大家详细讲解，需要的朋友可以参考下2022-10-10
新项目采用 Vue3 作为前端项目框架,避免不了要使用 echarts,但是在使用的时候,出现了与 Vue2 使用不一样的地方,所以特别记下来,希望给到有需要的同学一些帮助2023-10-10
这篇文章主要介绍了在vue中如何引入外部less文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了elementUI table表格动态合并的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了vue中van-picker的选项插槽的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
vue是目前非常流行的前端开发框架,随着技术的不断更新,我们也需要更新我们的vue项目,这篇文章主要给大家介绍了关于vue项目如何删除无用的依赖的相关资料,需要的朋友可以参考下2024-09-09
vue elementUI table表格自定义样式滚动效果
这篇文章主要介绍了vue elementUI table表格自定义样式滚动效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-08-08
最新评论