为什么在webpack更新后css会损坏

Question

我负责将一个遗留的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'
};

Answer 1

我在跟踪

本文档

，但在我们的特定情况下

vue风格的加载器

使用

样式加载器

成功了：

{
            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文档

，“

在大多数情况下，您不需要自己配置此加载器

"，因此在vue-style-loader文档中似乎存在当前的模棱两可的地方。

我将继续讨论这个话题，以防其他人在这个问题上遇到困难。