在 CSS module中使用全局 css 文件

IT技术 css reactjs webpack postcss css-modules
2021-05-05 05:25:47

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

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

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

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

我想坚持最佳实践，因为我正在从事一个开源项目，并希望它以最好的方式完成。感谢您的任何建议！

2个回答

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

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

怎么运行的：

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

我写了一个简短的函数来检查resourcePath应该保持全局​​的module。对我来说似乎工作正常，唯一的缺点是我必须写两次（开发和生产设置）。

这是开发环境示例：

{
    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

其它你可能感兴趣的问题
上一篇React Transition Group：偏移动画开始时间 下一篇为什么当状态改变时react不调用渲染？