Sass 加载器在废弃但 运行 Vue 项目中的问题

Question

制作这个 Vue 前端的人离开了公司，我一直在将 Webpack 从 2 升级到 4。我不明白 Sass 配置在哪里，无论多少次和短语 I ack。如果我在 webpack 基本配置文件中为 Sass 和 CSS 定义一个规则集，如下所示：

{
rule: /\.scss./.
use: [
    loader: "sass-loader", "vue-style-loader", "style-loader", "css-loader", "postcss-loader"
]
}

它为每个加载程序生成大约 68 个错误。我已经用谷歌搜索了它，它产生的错误是多种多样的，与规则集被定义了两次这一事实有关。但是 ack 没有显示这样的东西，而且，如果我删除它们，我会得到这个错误，大约 68 次：

You may need an appropriate loader to handle this file type.

可能是什么问题？我正在使用 node-sass 和 sass-loader.

Answer 1

Webpack 4 使用不同的加载器结构。您需要一个数组来链接，顺序很重要。

// webpack.config.js
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: [
                "style-loader", // creates style nodes from JS strings
                "css-loader", // translates CSS into CommonJS
                "sass-loader" // compiles Sass to CSS, using Node Sass by default
            ]
        }]
    }
};

顺便说一句，根据经验，花时间使用 vue-cli-3 并从头开始可能是值得的。只需使用 vue-cli-3 创建一个默认项目，然后开始将您的代码迁移到其中。默认情况下，它将处理所有加载程序，同时消除用于测试、构建、分析和调试的样板配置。那么你的配置代码甚至都不需要:)