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

Posted 2023-02-23

【中文标题】如何通过 vue-cli 3 配置 webpack 以使用 sass

【英文标题】：How to configure webpack via vue-cli 3 to use sass

【发布时间】：2019-05-13 10:33:15

【问题描述】：

我正在使用 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

【问题讨论】：

你检查了吗：***.com/questions/44019469/…，我们也有 sass，我们在 vue.config.js 中没有具体说明，你总是可以运行 vue inspect --mode production > production.config .js 来查看 vue-cli 在 npm run build 上使用的 webpack 配置，或者 vue inspect --mode development > development.config.js 来查看 vue-cli 在 npm run serve 上使用的 webpack 配置，如果你改变了那个 vue。配置文件，然后再次运行它们，您可以看到您的更改

【参考方案1】：

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

vue add style-resources-loader