2

我正在为一个项目使用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>

同样，不确定这是否正确。

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

4

2 回答 2

3

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

于 2016-06-09T13:47:01.143 回答
1

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

这个怎么运作：

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

我编写了一个简短的函数来检查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

于 2020-11-09T02:22:43.340 回答