I did an update of many modules in my project. One of them was webpack from version 2.7 to 5.7.
After a while I was able to setup everything so the created bundles are working as expected. But some of my react components are importing css or scss files which are empty or useless. Example:
somecomponent.styles.scss
.wrapper {
}
In my component itself I am importing the styles:
import styles from './somecomponent.styles.scss';
In this case styles will be undefined.
I know that my scss file does not make much sense in this case but with webpack 2.7 it was at least loading an object with my classes inside that file. All other imports of css/scss files are working fine - as long as something is in it.
After my research I did not find any options to solve this problem. My plan B would be to check all my css/scss files in my project but if possible I would try to avoid that (from time to time I could do that but the project has more then 800 css/scss files and it would take some time to check all these files ...) Do you have any idea how to configure webpack correctly in my case?
This is my rule for css/scss files in my webpack.config.js:
// ...
const plugins = [];
plugins.push(
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
);
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.(scss|css)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
modules: {
localIdentName: '[hash:8]',
},
},
},
'sass-loader',
{ loader: 'postcss-loader' },
],
},
// ...
],
},
plugins,
};
Just to clarify the problem more:
If I change my somecomponent.styles.scss file to the following it is working and the variable styles is not undefined anymore.
.wrapper {
display: block;
}