Webpack项目升级依赖后SCSS无法编译加载问题求助

原本正常运行的Webpack项目，升级依赖后SCSS不再被编译，编译产物里找不到CSS代码。试过把SCSS的loader规则换成包含style-loader的配置，问题仍未解决。相关配置与代码如下：

package.json 内容 #

{"name": "webpack-threejs","version": "1.0.1","description": "Keivan Sina personal website.","keywords": ["three.js","webpack","glsl","glslify"],"author": {"name": "Keivan Sina","url": "http://k1sina.com"},"license": "MIT","sideEffects": false,"scripts": {"build": "webpack --mode production --config config/prod.js","start": "webpack serve --config config/dev.js"},"dependencies": {"@brunoimbrizi/controlkit": "^0.1.93","@fancyapps/fancybox": "^3.5.7","animate.css": "^4.1.0","browser-detect": "^0.2.28","domready": "^1.0.8","glsl-noise": "0.0.0","gsap": "^2.1.3","imagesloaded": "^4.1.4","isotope-layout": "^3.0.6","jquery-bridget": "^2.0.1","odometer": "^0.4.8","stats.js": "^0.17.0","swiper": "^6.1.1","three": "^0.98.0","wow.js": "^1.2.2"},"devDependencies": {"@babel/core": "^7.0.0-beta.52","@babel/plugin-syntax-dynamic-import": "^7.0.0-rc.1","@babel/polyfill": "^7.0.0-beta.55","@babel/preset-env": "^7.0.0-beta.52","babel-loader": "^8.0.0-beta.4","bootstrap": "^4.4.0","clean-webpack-plugin": "^0.1.19","copy-webpack-plugin": "^4.5.2","css-loader": "^6.7.3","file-loader": "^6.2.0","glslify": "^6.2.1","glslify-import-loader": "^0.1.2","glslify-loader": "^1.0.2","html-loader": "^0.5.5","html-webpack-plugin": "^5.5.0","imports-loader": "^0.8.0","jquery": "^3.4.1","mini-css-extract-plugin": "^2.7.2","node-sass": "^6.0.1","raw-loader": "^0.5.1","sass": "^1.58.1","sass-loader": "^13.2.0","style-loader": "^3.3.1","webpack": "^5.75.0","webpack-cli": "^5.0.1","webpack-dev-server": "^4.11.1","webpack-merge": "^4.1.3"}}

通用Webpack规则配置 #

const path = require('path');const webpack = require('webpack');const CleanWebpackPlugin = require('clean-webpack-plugin');const CopyWebpackPlugin = require('copy-webpack-plugin');const HtmlWebpackPlugin = require('html-webpack-plugin');const MiniCssExtractPlugin = require('mini-css-extract-plugin');const variables = require('./variables.js');const __root = path.resolve(__dirname, '../');module.exports = {entry: {index: ['@babel/polyfill', './src/scripts/index.js'],// index: '/src/scripts/index.js'},output: {path: path.resolve(__root, 'dist'),filename: 'scripts/[name].[chunkhash].js',chunkFilename: 'scripts/[name].[chunkhash].js',},module: {rules: [{test: /\.js$/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env'],plugins: ['@babel/plugin-syntax-dynamic-import'],},},exclude: /node_modules/,},{test: /\.(glsl|frag|vert)$/,use: ['glslify-import-loader', 'raw-loader', 'glslify-loader'],},{test: /three\/examples\/js/,use: 'imports-loader?THREE=three',},{test: /\.scss$/,use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],},{test: /\.html$/,use: {loader: 'html-loader',options: {interpolate: true,},},},{test: /\.(jpe?g|png|gif|svg|webp)$/i,use: {loader: 'file-loader',options: {name: '[name].[hash].[ext]',output: 'images',esModule: false},},},{test: /\.(woff|woff2|eot|ttf|otf)$/,use: 'file-loader',},],},resolve: {alias: {'three-examples': path.join(__root, './node_modules/three/examples/js'),},},plugins: [new CleanWebpackPlugin(['dist'], { root: __root }),new CopyWebpackPlugin([{from: path.resolve(__root, 'static'),},]),new HtmlWebpackPlugin({template: './src/index.html',inject: true,chunks: ['index'],filename: 'index.html',}),new HtmlWebpackPlugin({template: './src/cases.html',inject: true,chunks: ['index'],filename: 'cases.html',templateParameters: variables,}),new HtmlWebpackPlugin({template: './src/iransalary.html',inject: true,chunks: ['index'],filename: 'iransalary.html',templateParameters: variables,}),new HtmlWebpackPlugin({template: './src/safarmarket.html',inject: true,chunks: ['index'],filename: 'safarmarket.html',templateParameters: variables,}),new HtmlWebpackPlugin({template: './src/rideradar.html',inject: true,chunks: ['index'],filename: 'rideradar.html',templateParameters: variables,}),new HtmlWebpackPlugin({template: './src/logodesign.html',inject: true,chunks: ['index'],filename: 'logodesign.html',templateParameters: variables,}),new HtmlWebpackPlugin({template: './src/artvan.html',inject: true,chunks: ['index'],filename: 'artvan.html',templateParameters: variables,}),new HtmlWebpackPlugin({template: './src/orugso.html',inject: true,chunks: ['index'],filename: 'orugso.html',templateParameters: variables,}),new HtmlWebpackPlugin({template: './src/navaaz.html',inject: true,chunks: ['index'],filename: 'navaaz.html',templateParameters: variables,}),new HtmlWebpackPlugin({template: './src/iotanalytic.html',inject: true,chunks: ['index'],filename: 'iotanalytic.html',templateParameters: variables,}),new HtmlWebpackPlugin({template: './src/smartdent.html',inject: true,chunks: ['index'],filename: 'smartdent.html',templateParameters: variables,}),new HtmlWebpackPlugin({template: './src/ledgercover.html',inject: true,chunks: ['index'],filename: 'ledgercover.html',templateParameters: variables,}),new webpack.ProvidePlugin({THREE: 'three',}),new MiniCssExtractPlugin({filename: '[name].[contentHash].css',}),],};

index.js 内容 #

import ready from 'domready';import App from './App';import './agansy';import './../sass/style.scss';ready(() => {window.app = new App();window.app.init();});

问题排查与解决思路 #

1. 修正sideEffects配置
   package.json中"sideEffects": false会让Webpack把无导出的SCSS导入判定为无用代码，在生产模式下被tree-shaking移除。修改为：

   "sideEffects": ["*.scss", "*.css"]
   

2. 解决依赖版本兼容问题
   当前使用的@babel系列是beta版本，和Webpack 5存在兼容性风险；clean-webpack-plugin版本过旧，无法适配Webpack 5。建议：

   • 升级@babel/core、@babel/preset-env等依赖到稳定版（如^7.20.0系列）
   • 更新clean-webpack-plugin到最新版（^4.0.0+）

3. 区分环境配置loader
   开发环境用style-loader注入样式到页面，生产环境用MiniCssExtractPlugin.loader提取独立CSS文件，通过webpack-merge分别配置：

   • 开发环境SCSS规则：

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

   • 生产环境保留原MiniCssExtractPlugin.loader配置

4. 验证文件路径正确性
   确认./../sass/style.scss的相对路径是否准确，可尝试用绝对路径或Webpack别名简化导入，避免路径错误导致文件未被加载。

内容的提问来源于stack exchange，提问作者Keivan Sina