我知道这涉及到修改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",
                                            },
                                        },
                                    ],
                                },
                            },
                        },
                    ],
                },
            ],
        },

谢谢!

最佳答案

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



更新:

请注意,lang<style lang="stylus">属性的值将影响配置项的写入方式!
langstylus时,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://stackoverflow.com/a/49086022/4723163

关于vue.js - 如何在Vue CLI 3中使用stylus-resources-loader?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48750182/

10-09 15:24