如何在Vue CLI 3中配置stylus-resources-loader？配置遇阻求助

我之前也碰到过一模一样的问题！直接把配置贴到configureWebpack对象里确实经常不生效，核心原因是没正确接入 Vue CLI 预设的 webpack loader 链式处理流程，或者配置规则没匹配到所有 stylus 文件。下面给你两种靠谱的解决方法，亲测有效：

一、推荐使用 chainWebpack 配置（更贴合 Vue CLI 体系） #

Vue CLI 的 webpack 配置是链式结构的，用chainWebpack可以精准插入 loader，不会覆盖默认配置，稳定性更高：

首先确保已经安装了所有依赖：

npm install stylus stylus-loader stylus-resources-loader --save-dev

然后修改vue.config.js：

const path = require('path');

module.exports = {
  chainWebpack: config => {
    // 遍历 Vue 处理 stylus 文件的所有规则类型
    const ruleTypes = ['vue-modules', 'vue', 'normal-modules', 'normal'];
    ruleTypes.forEach(type => {
      config.module.rule('stylus')
        .oneOf(type)
        .use('stylus-resources-loader')
        .loader('stylus-resources-loader')
        .options({
          // 这里填入你需要全局引入的 stylus 文件路径，支持多个文件
          resources: [
            path.resolve(__dirname, './src/styles/global-variables.styl'),
            path.resolve(__dirname, './src/styles/global-mixins.styl')
          ]
        })
        .end();
    });
  }
};

二、如果坚持用 configureWebpack 配置 #

这种方式需要手动完整声明 stylus 文件的 loader 链，注意不要和默认规则冲突：

const path = require('path');

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.styl(us)?$/,
          use: [
            'vue-style-loader',
            'css-loader',
            'stylus-loader',
            {
              loader: 'stylus-resources-loader',
              options: {
                resources: [
                  path.resolve(__dirname, './src/styles/global-variables.styl'),
                  path.resolve(__dirname, './src/styles/global-mixins.styl')
                ]
              }
            }
          ]
        }
      ]
    }
  }
};

几个关键注意事项 #

• 一定要用path.resolve(__dirname, '你的文件路径')写绝对路径，相对路径容易因为 webpack 上下文问题找不到文件
• 配置完成后必须重启开发服务器，热重载不会生效 webpack 配置修改
• 检查你的全局 stylus 文件有没有语法错误，一旦出错会导致整个 loader 链失效

内容的提问来源于stack exchange，提问作者Nico