我该如何在Vue CLI 3中使用stylus-resources-loader？

Question

我知道这涉及修改vue.config.js，但是只是将我想要的配置粘贴到configureWebpack对象中似乎不起作用。有其他人能够解决这个问题吗？

要添加的所需配置：

module: {
            rules: [
                {
                    test: /\.vue$/,
                    use: [
                        {
                            loader: "vue-loader",
                            options: {
                                loaders: {
                                    stylus: [
                                        {
                                            loader: "stylus-resources-loader",
                                            options: {
                                                resources:
                                                    "./src/assets/_base.styl",
                                            },
                                        },
                                    ],
                                },
                            },
                        },
                    ],
                },
            ],
        },

感谢您！

- Nico

Answer 1

const path = require('path');

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => {
        options.loaders.stylus = options.loaders.stylus.concat({
          loader: 'stylus-resources-loader',
          options: {
            resources: path.resolve('./src/assets/_base.styl'),
          },
        });
        return options;
      });
  },
};

---

更新：

需要注意的是，在 <style lang="stylus"> 中 lang 属性的值会影响配置项的编写方式！ 当 lang 为 stylus 时，stylus 会挂载在 loader 上，应该像这样编写：options.loaders.stylus；而当 lang 的值为 styl 时，应该编写成 options.loaders.styl。

这是因为在 @vue/cli-service/lib/webpack/CSSLoaderResolver.js 中有以下代码：

getLoader (test, loader, options = {}) {
  styl (test = /\.styl$/) {
    return this.getLoader(test, 'stylus')
  }

  stylus (test = /\.stylus$/) {
    return this.getLoader(test, 'stylus')
  }
}

请参考https://dev59.com/C6nka4cB1Zd3GeqPPIKT#49086022。

- huguangju

---

似乎不起作用。我在这个项目中也使用了TypeScript，这会有什么影响吗？ - Nico

抱歉，这是我的错。请将 options.loaders.styl 更改为 options.loaders.stylus，它应该能够正常工作。 - huguangju