vue 配置 自动导入stylus全局变量

80 阅读1分钟

直接在main.js 引入stylus变量文件 无法生效
需要在vue文件 引入才可以生效
但全局变量如果每个vue文件都引入一次 不方便维护

配置方式: 参考官网

// 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)))
  },
}

function addStyleResource (rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
      // 地址传入你自己的变量文件地址
        path.resolve(__dirname, './src/css/variables.styl'),
      ],
    })
}