为什么我的 SASS 风格只适用于部分？答案

【问题标题】：Why does my SASS style only apply partially?为什么我的 SASS 风格只适用于部分？
【发布时间】：2020-02-06 16:01:44
【问题描述】：

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

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

【问题讨论】：

标签： reactjs webpack css-loader storybook sass-loader

【解决方案1】：

当 CSS 文件为 required 时，Webpack 会打包 CSS 文件，就像在 required 时打包 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 独立处理每个 Sass 文件，因为它是 required，所以每个组件的 Sass 文件都需要导入它需要的任何变量/mixin。（听起来sass-resources-loader 正在尝试为您处理，但没有给出想要的结果？）

您目前如何加载您的 Sass 文件？

【讨论】：