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

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

标签： javascriptvue.jswebpackvue-cli

Answer 1

如果您使用的是 vue cli 3，那么只需在项目根目录中运行以下命令：

vue add style-resources-loader