vue-cli配置less变量的两种方式
方式一：build文件配置
步骤1：安装包
npm install sass-resources-loader --save-dev
步骤二： build 的utils.js配置
找到exports.cssLoaders = function (options) {}这段代码，
function lessResourceLoader() {
var loaders = [
cssLoader,
'less-loader',
{
loader: 'sass-resources-loader',
options: {
resources: [
path.resolve(__dirname, './src/assets/style/index.less'),
]
}
}
];
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(lessResourceLoader)
}
}
//./src/assets/style/index.less是存放全局样式变量的配置文件
//最后的['vue-style-loader']连接的文件就是上面定义的函数lessResourceLoader
步骤三：重启npm run dev
改动了webpack配置文件一定要重启才能生效。
步骤四：在上面的index.less中编写颜色变量
@color-green: #20d14b;
@color-red: #ff2c00;
@color-blue: #1989fa;
@color-orange: #f5a623;
@color-light-orange: #ff5b05;
步骤五:在组件中使用变量
<style lang='less' scoped>
/deep/.van-checkbox__label {
display: flex;
align-items: center;
color: @color-green;
}
</style>
方式二. 在vue.config.js中使用
步骤一: 安装包
npm i less-loader less style-resources-loader --save-dev
步骤二: 在vue.config.js中配置
在module.exports中写入以下代码:
pluginOptions: {
'style-resources-loader': { // 第三方插件配置
preProcessor: 'less',
patterns: [path.resolve(__dirname, './src/style/index.less')] // less所在文件路径
}
}
顺利的话, 按照上面的三四五步骤走一遍就可以了生效了.
然而我要说下我遇到的坑
配置完之后, 我就一直出现编译报错,大致就是不能解析配置内容,然后还有在页面上没找到定义的变量;
解决: 安装vue-cli-plugin-style-resources-loader
npm i vue-cli-plugin-style-resources-loader --save-dev
可能是安装style-resources-loader时, 没有一并安装上vue-cli-plugin-style-resources-loader, 导致报错, 安装完再重启就好了.
