Reactjs 为什么我的SASS风格只部分适用？

我正在创建一个react组件库。除了一些全局变量外，样式需要被隔离。我的风格不适用于任何地方，只适用于某些页面。这是为什么？我如何修复它

My webpack.config.js：

const webpack = require('webpack');
const path = require('path');

module.exports = async ({ config, mode }) => {
    config.module.rules.push({
        test: /\.scss$/,
        use: [
            'style-loader',
            {
                loader: 'css-loader',
                options: {
                    modules: {
                        mode: 'local',
                        localIdentName:
                            '[name]-[local]-[hash:base64:3]',
                    },
                    import: true,
                    importLoaders: true,
                }
            },
            {
                loader: 'sass-loader',
            },
            {
                loader: 'sass-resources-loader',
                options: {
                    resources: [
                        path.resolve(__dirname, '../src/styles/variables/_variables.scss'),
                        path.resolve(__dirname, '../src/styles/variables/_header.scss'),
                        path.resolve(__dirname, '../src/styles/variables/_footer.scss')
                    ]
                }
            }
        ],
    });
    return config;
};

例如：我有一个模块“复选框”。模块的故事如下。第一个故事是有风格的，第二个故事不是

stories.add('Empty', () => (
    <Checkbox />
));

stories.add('With Label', () => (
    <Checkbox  classes={propsClasses} field={'Field'} label={'Label'} />
));

---

当CSS文件是

require

d时，Webpack绑定CSS文件，就像当JS文件是

require

d时绑定JS文件一样。当使用

sass加载器

、

css加载器

和

样式加载器

时，

require

将sass源代码传递给这些加载器，结果是JS代码，在运行时将传输的css插入页面上的

元素中。JS代码就是添加到Web包中创建的代码

我不熟悉

sass资源加载器

，但根据其自述，

此加载器将@import您的sass资源导入每个必需的sass模块

——这可能是您看到为每个模块导入所有样式的原因

要在每个组件的基础上隔离样式，您可能需要为包含该组件样式的每个组件创建一个

.scss

文件，并在其JS模块中创建一个

require（）

文件。因为webpack独立处理每个Sass文件，因为它是

require

d，所以每个组件的Sass文件都需要导入它需要的任何变量/混合。（听起来好像

sass资源加载程序
正在尝试为您处理这些问题，但没有给出所需的结果？）

您当前如何加载Sass文件

const webpack = require('webpack');
const path = require('path');

module.exports = async ({ config, mode }) => {

    config.module.rules.push({
        test: /\.scss$/,
        use: [
            'style-loader',
            {
                loader: 'css-loader',
                options: {
                    modules: {
                        mode: 'local',
                        localIdentName: '[local]',
                    },
                    import: true,
                    importLoaders: true,
                }
            },
            {
                loader: 'sass-loader',
            },
            {
                loader: 'sass-resources-loader',
                options: {
                    resources: [
                        path.resolve(__dirname, '../src/styles/variables/_variables.scss'),
                        path.resolve(__dirname, '../src/styles/variables/_header.scss'),
                        path.resolve(__dirname, '../src/styles/variables/_footer.scss')
                    ]
                }
            }
        ],
    });
    return config;
};