Question

我正在使用vue-cli 3构建一个vue应用程序。我想在我的webpack版本中包含sass文件，但是vue-cli提取了webpack.config.js文件。相反，我们将创建一个vue.config.js文件，并使用一组指令对其进行配置。

如果我正在配置webpack.config.js，则可以进行以下操作：

module.exports = {
  module: {
    rules: [
      // ... other rules omitted

      // this will apply to both plain `.scss` files
      // AND `<style lang="scss">` blocks in `.vue` files
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  // plugin omitted
}

我应该如何配置vue.config.js来达到相同的目的？这是我的最佳尝试：

module.exports = {
    chainWebpack: config => {
        config.module
            .rule('scss')
            .test(/\.scss$/)
            .use('vue-style-loader')
            .loader('vue-style-loader')
            .use('css-loader')
            .loader('css-loader')
            .use('sass-loader')
            .loader('sass-loader')
            .end();
    }
};

这失败，并显示消息

ERROR  TypeError: config.module.rule(...).test(...).use(...).loader(...).use is not a function

Answer 1

如果您正在使用vue cli 3，则只需在项目根目录中运行以下命令即可：

vue add style-resources-loader

如何通过vue-cli 3配置Webpack以使用sass

1 个答案: