After migrating my React project to Webpack v5, I am facing an issue where none of my .scss files are being picked up when I run the project.
I meticulously followed the guide on migrating webpack https://webpack.js.org/migrate/5/, updated all plugins and loaders (which were MAJOR updates), and adjusted the configuration file to fit the new versions. However, the styles are not being applied.
Here is a snippet from my package.json:
"devDependencies": {
...
"clean-webpack-plugin": "^4.0.0",
"compression-webpack-plugin": "^10.0.0",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.7.1",
...
"file-loader": "^6.2.0",
"fork-ts-checker-webpack-plugin": "^6.2.6",
"html-webpack-plugin": "^5.5.0",
...
"mini-css-extract-plugin": "^2.6.1",
...
"node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^6.0.1",
"react-hot-loader": "^4.13.0",
"sass-loader": "^13.1.0",
"style-loader": "^3.3.1",
"terser-webpack-plugin": "^5.3.6",
"ts-loader": "^9.4.1",
"webpack": "^5.74.0",
"webpack-bundle-analyzer": "^4.6.1",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
}
"sideEffects": [
"*.css",
"*.scss"
]
}
And here is a snippet from my webpack.config.json:
module.exports = {
mode: 'development',
entry: './src/index.tsx',
output: {
publicPath: '/',
path: outPath,
filename: 'bundle.js',
globalObject: 'this'
},
module: {
rules: [
{
test: /\.tsx?$/,
exclude: [
/(node_modules)/,
/\.test.tsx?$/,
/\.spec.tsx?$/
],
use: [
{loader: 'react-hot-loader/webpack'},
{
loader: 'ts-loader',
options: {
transpileOnly: true,
allowTsInNodeModules: false,
onlyCompileBundledFiles: true
}
}
]
},
{
test: /\.(css|scss)$/,
use: [
{loader: 'style-loader'},
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: {
localIdentName: '[name]__[local]___[hash:base64:5]',
},
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
},
}
]
}
]
}
};
This is how I am importing styles in my modules:
const styles = require('./index.scss')
<div className={styles['some-class']}>
Everything was working fine with the previous webpack version, but after the upgrade, the styling is no longer being applied. Any assistance would be greatly appreciated.