将全局 CSS 文件与 CSS 模块一起使用

Posted 2023-02-19

【中文标题】将全局 CSS 文件与 CSS 模块一起使用

【英文标题】：Using global css files with CSS Modules

【发布时间】：2016-10-10 03:36:08

【问题描述】：

我在一个项目中使用https://github.com/mxstbr/react-boilerplate，它使用 CSS 模块和 postCSS 作为样式，这很棒。但是，我还需要一些用于排版、基本组件等的全局 CSS 文件。如何添加这些文件的最佳实践是什么？我看过使用 preCSS 但不完全确定如何在 webpack 中设置它，以便它可以将这些全局文件导入到主样式表中。我是 webpack 的新手（来自 Gulp/Grunt 背景，使用 Sass），因此非常感谢这里的任何帮助。

如果我可以在 CSS 模块文件中使用这些文件中定义的变量和 mixins，那也很棒，但不确定这是否可行或建议。我已经安装了react-css-modules，这样我就可以使用styleName 来引用CSS 模块文件，并使用className 来引用全局CSS 类。

我知道有composes: class from '/path/to/file.css'; 属性，但我更希望有一些定义了各种实用程序类的全局文件，例如clearfix 和错误类等。所以使用react-css-modules，它看起来像这： <div className="clearfix" styleName="app-header">...</div>

再次，不确定这是否正确。

在从事开源项目时，我希望坚持最佳做法，并希望以尽可能最好的方式完成。感谢您的建议！

【参考方案1】：

当我想使用需要在 js 模板中直接引用的一些 css 文件（通过类名字符串）并且不支持 css 模块的 3rd 方库时，我确实遇到了这个问题。由于我不想通过添加 :global 修饰符来更改 css 文件（因为它们是第 3 方并且将来可能会更改），所以我发现 css-loader 中有一个模式设置可以用来保留某些文件的原始名称。

工作原理：

在 css-loader 中有一个模式设置（除了其他选项）接受一个函数。它将resourcePath 作为参数并返回值local、global 和pure。 Global 保留原始文件中定义的所有名称，而 local 使用定义的标准散列。这对于不使用 css 模块的第三方库来说很方便。

我编写了一个简短的函数来检查resourcePath 中是否有应该保持全局​​的模块。对我来说似乎工作得很好，唯一的缺点是我必须写两次（开发和生产设置）。

这是开发环境示例：

    loader: 'css-loader',
    options: 
        modules: 
            localIdentName: '[name]_[local]_[hash:base64:6]',
            exportLocalsConvention: 'camelCase',
            mode: (resourcePath) => 
                let globalStyles = ['module-to-stay-global-1', 'module-to-stay-global-2'];
                return globalStyles.some(globalFile => resourcePath.includes(globalFile)) ? 'global' : 'local'
            
        ,
    

mode 函数的文档可以在这里找到： https://github.com/webpack-contrib/css-loader#function-3

【参考方案2】：

css-modules 提供 :global 可用于在本地包含在您的代码 css 文件中，这些文件将在应用程序中全局包含

【讨论】：

谢谢达米安！所以我在任何模块文件中使用:global，它会被全局包含在任何其他模块文件中吗？这是否也包括 CSS 变量之类的东西？

是的，它将被全局包含在任何其他模块文件中。这个对我有用。我不能说 CSS 变量。对不起

@Damien。我基本上设置了与 OP 相同的工具，但使用的是 GatsbyJS。一切正常，但我唯一的问题是我的模块样式在全局样式之前被添加到文档中。我希望模块样式能够覆盖所有内容。您是否知道任何配置（样式加载器？）首先加载全局样式的方法？