为什么我的SASS样式仅部分适用？

Question

我正在创建一个反应组件库。除了一些全局变量之外，还需要隔离样式。我的样式不是仅在某些页面上适用于所有地方。为什么会这样，我该如何解决？

我的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'} />
));

编辑：使用下面的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: '[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;
};

Answer 1

Webpack在require d时捆绑CSS文件，与在require d时捆绑JS文件的方式相同。当使用sass-loader，css-loader和style-loader时，require将通过这些加载程序传递Sass源代码，结果是JS代码，该代码会将已转换的CSS插入页面上的<style>元素中运行。该JS代码是添加到webpack捆绑创建的内容。

我不熟悉sass-resources-loader，但根据其自述文件This loader will @import your SASS resources into every required SASS module，这很可能就是为什么您看到每个模块都导入了所有样式的原因？？

为了基于每个组件隔离样式，您可能需要每个包含该组件样式的组件的.scss文件，并希望其JS模块中的require()文件成为.scss。由于webpack会像require d一样独立处理每个Sass文件，因此每个组件的Sass文件将需要导入所需的任何变量/混合。 （听起来sass-resources-loader试图为您解决这个问题，但没有给出期望的结果？）

您目前如何加载Sass文件？