在vue cli 3生成的项目中设置less ,sass, stylus的全局变量

如题：

其实看官方文档我们知道可以使用style-resources-loader这个loader来设置自动化导入

在每一个关于stylus的文件中导入想要的导入的文件，你也可以设置为在每一个sass或者less文件中导入

但是这是新增了一条规则，来处理自动化导入。

有没有其他方式呢？那就是向预处理器传递选项

当然，我们还可以设置vue.config.js配置来达到全局引用效果

一、在sass中，

查阅官方文档 

 

 二、在less中

通过查看less的文档，我们知道有 

Global Variables 这个选项

所以：

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      less: {
        globalVars: {
          color: '#ccc'
        }
      }
    }
  }
}

 

三、在stylus中

// vue.config.js
var path = require('path')
module.exports = {
  css: {
    loaderOptions: {
      stylus: {
        import: path.resolve(__dirname, './src/styles/global.styl')
      },
    }
  }
}

 

设置完之后我们可以通过

vue inspect --rule stylus

命令来审查对应的loader规则