如果你在使用 Webpack 打包項目時,發現 CSS 文件不再被正確地加載或者出現其他一些奇怪的問題,很可能是由于 css-loader 的版本過高所導致的。
你的 package.json 可能會有這樣一段依賴配置: "devDependencies": { "css-loader": "^5.0.0" }
在使用 css-loader 5.0.0 時,它進行了一些會導致一些問題的更改。例如,在 CSS 中使用 :global(.className) 給類名添加 global CSS 樣式時,它會解析成類似于 [className]_default_long_class 中的類名,而不是添加到全局樣式表中。這樣會導致在生產環境下樣式表無法正確地加載,以及一些其他問題。
解決這一問題的方法是將 css-loader 的版本降級到 4.x 版本。你可以通過以下方式修改 package.json 中的依賴項:
"devDependencies": { - "css-loader": "^5.0.0", + "css-loader": "^4.0.0", }
然后你需要重新安裝依賴:
npm install
如果你已經使用了 css-loader 5.x 的一些新特性,可能需要一些額外的工作才能將代碼回退到 css-loader 4.x,但是這樣可以確保你的項目能夠正常工作。