前言
博主最近学习在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全局样式的步骤,如果上述内容存在问题,欢迎大家批评指正!!!
PS:本人目前可接php,vue,java,python相关毕业设计,课程设计和各类小程序开发,欢迎有意者QQ联系 3496790971