为什么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-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文档，在大多数情况下，你不需要自己配置这个加载器&;，所以在vue-style-loader文档

中似乎有一个模糊的地方我会把这个话题保持开放，以防有人在这个问题上绊倒。