vue-cli3.x 全局引入stylus文件方法 并且改变webpack的resolve设置

如果你想自动化导入文件 (用于颜色、变量、mixin……)，你可以使用 style-resources-loader。这里有一个关于 Stylus 的在每个单文件组件和 Stylus 文件中导入 ./src/styles/imports.styl 的例子：

// vue.config.js
const path = require('path')

　　function resolve (dir) {

  　　return path.join(__dirname, dir)

　　}

module.exports = {
  chainWebpack: config => {
　//设置resolve

 　 config.resolve.alias.set('vue$', 'vue/dist/vue.esm.js')

    　　.set('@',resolve('src'))

    　　.set('@assets',resolve('src/assets'))

    　　.set('components', resolve('src/components'))

   　　 .set('common',resolve('src/common'))

    　　.set('styles',resolve('src/assets/styles'))

    　　.set('api',resolve('src/api'))

　　//设置全局文件的引入
    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/styles/imports.styl'),
      ],
    })
}