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