vue cli3 预处理器配置全局变量
在vue cli3中使用预处理器(Sass/Less/Stylus)配置全局变量详细总结。在创建项目时就可以选择安装预处理器了,如果没有安装可以通过如下命令进行安装。
# Sass
npm install -D sass-loader node-sass
# Less
npm install -D less-loader less
# Stylus
npm install -D stylus-loader stylus
STEP1
一定一定少不了安装style-resources-loader
npm i style-resources-loader -dev
然后添加
vue add style-resources-loader
STEP2
在vue.config.js中进行配置,如果没有自己创建就好(与package.json同级)
官方写法
详情见:Vue CLI CSS相关
// vue.config.js
const path = require('path')
module.exports = {
chainWebpack: config => {
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type)))
//stylus为你自己使用的预处理器名自行更换
},
}
function addStyleResource (rule) {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [
path.resolve(__dirname, './预处理器文件所在路径'),
],
})
}
更简单的写法
这两种写法效果相同
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: "less",
// 指定全局变量的less文件
patterns: [path.resolve(__dirname, "src/assets/less/theme.less")]
// 同上文件路径
}
},
}
完成
完成后重启服务
npm run serve
本博客所有文章除特别声明外,均采用 CC BY-SA 3.0协议 。转载请注明出处!