Css 相同文件名时模块样式重叠的原因

我尝试使用Webpack的css加载插件分别为每个组件设计样式。但是，当文件具有相同的名称（例如：“index.scss”）和相同的属性（例如：“.container”）时，它将结合这两种样式，但在本例中，我只需要一种。我怎样才能解决这个问题

这是我的网页包配置：

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 } },
        ],
    },
]

我有两个文件：

src/screen2/index.scss

和

src/screen1/index.scss

在类中，名称

body--[hash:64]

包含来自2个文件的两种样式

src/screen1/index.scss

:local {
  .body {
    grid-area: body;
    background-color: $white;
 }
}

:local {
  .body {
    display: flex;
 }
}

和

src/screen2/index.scss

:local {
  .body {
    grid-area: body;
    background-color: $white;
 }
}

:local {
  .body {
    display: flex;
 }
}

正文的样式--[hash:64]

将

grid-area: body;
background-color: $white;
display: flex;

但是在本例中，我只导入了一个文件

src/screen1/index.scss

，例如

grid-area: body;
background-color: $white;

---

如何解决此问题？

您没有在配置中指定

模块

选项

        {
            // 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

            } 
        },

---

阅读0.28.11版本的

更新

css加载程序

包中的更多内容

我尝试了“全局”、“本地”，但仍然不起作用（更新时刷新了网页包）在配置中尝试

模块：true

。然后从样式中删除

：local

，您不需要它。仍然无法使用。2个不同路径的样式文件，但在编译时将使用相同的名称，例如

index\uu body--WMbpV

我通过将新版本

css loader

从0.28.7更新到0.28.11解决了这个问题