Question

做这个Vue前端的人离开了公司，我一直坚持将Webpack从2升级到4。我不知道Sass配置在哪里，无论我{{1 }}。如果我在webpack基本配置文件中为Sass和CSS定义了规则集，如下所示：

ack

每个装载程序都会产生68个错误。我用谷歌搜索了它，它产生的各种错误与规则集已经定义两次的事实有关。但是{ rule: /\.scss./. use: [ loader: "sass-loader", "vue-style-loader", "style-loader", "css-loader", "postcss-loader" ] }并没有显示这样的内容，此外，如果我将其删除，则会出现68次这样的错误：

ack

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

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创建一个默认项目，然后开始将代码迁移到该项目即可。默认情况下，它将处理所有装载程序，并消除用于测试，构建，分析和调试的样板配置。然后甚至不需要您的配置代码：）

Sass loader在废弃但正在运行的Vue项目中的问题

1 个答案: