Question

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

如果我可以在CSS模块文件中使用这些文件中定义的变量和mixin，但也不确定是否可行或建议，这也会很棒。我已经安装了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>

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

我希望坚持最佳实践，因为我正在开发一个开源项目，并希望以尽可能最好的方式完成。谢谢你的建议！

Answer 1

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

Answer 2

当我想使用需要一些直接在js模板中（通过类名字符串）直接引用的css文件且不支持css模块的第三方库时，确实遇到了此问题。由于我不想通过添加:global修饰符来更改css文件（因为它们是第三方并且将来可能会更改），因此我发现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'
            }
        },
    }
}

有关模式功能的文档可以在这里找到： https://github.com/webpack-contrib/css-loader#function-3

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

2 个答案: