为什么 webpack 更新后 css 坏了答案

【问题标题】：Why is css broken after webpack update为什么 webpack 更新后 css 坏了
【发布时间】：2021-05-26 14:07:25
【问题描述】：

我负责将旧版 VUE 项目更新为最新的 npm 包。我已成功更新并获得成功的 webpack 编译，没有错误，但由于某种原因，超出了我的掌握，更新后 css 停止在浏览器中呈现。我真的很感激这个线索。我们对样式表使用 SCSS 语法。控制台中没有错误。

谢谢。

package.json:

{   
"scripts": {
"build": "webpack --config webpack.config.js"
},
"dependencies": {
"@riophae/vue-treeselect": "0.4.0",
"@tweenjs/tween.js": "17.4.0",
"ajv": "^6.12.6",
"axios": "^0.21.1",
"bootstrap": "4.3.1",
"bootstrap-vue": "2.0.4",
"chart.js": "2.9.2",
"core-js": "^3.9.0",
"fibers": "^5.0.0",
"http-server": "^0.12.3",
"moment-mini": "2.22.1",
"npm": "^7.5.6",
"primeflex": "^2.0.0",
"primeicons": "^4.0.0",
"primevue": "^2.4.0",
"simple-web-worker": "1.2.0",
"vue": "^2.6.12",
"vue-bootstrap-datetimepicker": "4.1.4",
"vue-chartjs": "3.5.0",
"vue-color": "2.7.0",
"vue-grid-layout": "2.3.7",
"vue-multiselect": "2.1.6",
"vue-router": "3.0.7",
"vue-simple-search-dropdown": "^1.0.1",
"vue-virtual-scroll-list": "1.4.2",
"vuedraggable": "2.23.2",
"vuex": "3.1.1"
},
"devDependencies": {
"@babel/core": "^7.13.1",
"@babel/preset-env": "^7.13.5",
"babel-loader": "^8.2.2",
"compression-webpack-plugin": "^7.1.2",
"cross-env": "5.2.1",
"css-loader": "^5.0.2",
"eslint": "4.19.1",
"eslint-plugin-html": "4.0.6",
"eslint-plugin-vue": "4.7.1",
"node-sass": "^4.14.1",
"sass": "^1.32.8",
"sass-loader": "^10.1.1",
"vue-loader": "^15.9.6",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.12",
"walk": "2.3.14",
"webpack": "^5.24.1",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2",
"webpack-hot-middleware": "2.25.0"
}
}

webpack.config.js：

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
entry: {
    app: ['./src/app.js'],
},
output: {
    path: path.resolve('build'),
    filename: 'dataAnalysis.js',
},
module: {
     rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader'
        },
        {
            test: /\.css$/,
            use: ['vue-style-loader', 'css-loader'],
        },
        {
            test: /\.scss$/,
            use: ['vue-style-loader', 'css-loader', 'sass-loader'],
        },
        {
            test: /\.(png|jpg|gif|pdf)$/,
            type: 'asset/resource',
        },
        {
            test: /\.(woff|woff2|otf|eot|ttf|svg|ico)$/,
            type: 'asset/inline',
        },
    ],
},
plugins: [
    new VueLoaderPlugin(),
],
resolve: {
    extensions: ['*', '.js', '.vue', '.json'],
    alias: {
        // This is to make it easier to import the globals.scss file in components.
        // This avoids knowing the relative path.
        style: path.resolve(__dirname, './src/style/'),
        assets: path.resolve(__dirname, './src/assets/'),
        src: path.resolve(__dirname, 'src'),
    },
} ,
performance: {
    hints: false,
},
mode: 'development'
};

【问题讨论】：

您需要阅读从 webpack 的初始版本到您的目标版本的所有发布变更日志，并仔细检查 sass、node-sass 和 sass-loader。

标签： css vue.js webpack sass

【解决方案1】：

我关注了this documentation，但在我们的特定情况下，将 vue-style-loader 与 style-loader 交换就可以了：

        {
            test: /\.css$/,
            use: ['vue-style-loader', 'css-loader'],
        },
        {
            test: /\.scss$/,
            use: ['vue-style-loader', 'css-loader', 'sass-loader'],
        },

应该是：

        {
            test: /\.(scss|css)$/,
            use: ['style-loader', 'css-loader', 'sass-loader'],
        },

这有点符合git documentation，“在大多数情况下你不需要自己配置这个加载器”，所以目前在 vue 风格中似乎存在歧义-loader 文档

我会保持话题开放，以防其他人偶然发现这个问题。

【讨论】：