Why module style is overlap when same filename - css

Question

I'm try to style for each component separately by using css-loader plugin of Webpack. But when files has the same name (for example: 'index.scss') and has the same property (for example: '.container') it will combine both style, but in this case I just need ones. How can I solve that
This is my Webpack configuration:
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: 'style-loader',
options: {
insertAt: 'top',
sourceMap: true
}
},
{
// Handle import/ require css
// It help to css for each component
// https://github.com/webpack-contrib/css-loader#scope
loader: 'css-loader',
options: {
sourceMap: true ,
localIdentName: '[path][name]__[local]--[hash:base64:5]',
camelCase: true,
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
// minimize: true,
plugins: () => [
require('postcss-flexbugs-fixes'),
// Help to generate specific css for each component
// require('postcss-modules'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
}
},
{ loader: 'sass-loader', options: { sourceMap: true } },
],
},
]
Example:
src/screen1/index.tsx
const styles = require('./index.scss')
const Dashboard = ({ children, url }: IDashboardPropsIn) => {
return (
<div className={styles.body}>
{children}
</div>
)
}
And I has 2 files: src/screen2/index.scss and src/screen1/index.scss
Somehow in class which name body--[hash:64] has both styles from 2 files
src/screen1/index.scss
:local {
.body {
grid-area: body;
background-color: $white;
}
}
and src/screen2/index.scss
:local {
.body {
display: flex;
}
}
Style of body--[hash:64] will be
grid-area: body;
background-color: $white;
display: flex;
But in this case I only one import the file src/screen1/index.scss such as
grid-area: body;
background-color: $white;
How can I solve that?

Answer 1

You did not specify the modules option in your config
{
// Handle import/ require css
// It help to css for each component
// https://github.com/webpack-contrib/css-loader#scope
loader: 'css-loader',
options: {
sourceMap: true ,
localIdentName: '[path][name]__[local]--[hash:base64:5]',
camelCase: true,
modules: true, // or 'local' | 'global' | false
}
},
Read more in the docs

Answer 2

Update css-loader package to 0.28.11 version