vue-cli3全局使用CSS预处理语言变量
这里面包含Less、stylus、sass、scss
我们主要使用一个插件style-resources-loader
来实现。
- 使用vue add style-resources-loader 添加插件的方式,这时控制台会让你选择语言,选择好回车后vue-cli3会在vue.config.js
这个文件中自动给你配置一部分。
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [/* 自己的变量文件路径 */]
}
}
}
然后自己加上路径,比如我通常是这样写的
const path = require('path')
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [path.resolve(__dirname, './src/common/style/variable.less')]
}
}
}
- 第二种就是自己安装
style-resources-loader
这个包,然后在vue.config.js中配置如上就可以了。
配置后记得重启一下项目。然后就可以在对应语言文件中快乐的使用全局变量。
比如在.vue文件中
<style lang="less" scoped>
p.desc {
color: @text-color-d;
font-size: 14px;
}
</style>
又或者单独的文件中 eg: base.less
.border {
border: 1px solid @them-color;
}
对于其他预处理语言也是一样的!