vue-cli3 全局使用 CSS 预处理语言变量

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;
}

对于其他预处理语言也是一样的！