在CSS模块中使用全局CSS文件 [英] Using global css files with CSS Modules

问题描述

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

I'm using https://github.com/mxstbr/react-boilerplate for a project, which uses CSS Modules and postCSS for the styles, which is great. However, I also need to have some global CSS files for typography, base components, etc. What is the best practice for how these should be added in? I've looked at using preCSS but not entirely sure how to set it up within webpack, so that it can import these global files into the main stylesheet. I'm new to webpack (come from a Gulp/Grunt background, using Sass) so any help here would be much appreciated.

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

It would also be great if I could use the variables and mixins defined in these files in the CSS Module files, but unsure if this is possible or advised. I've installed react-css-modules so that I can use styleName to refer to the CSS Module file and className to refer to the global CSS classes.

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

I know there is the composes: class from '/path/to/file.css'; attribute but I would prefer to have some global files where various utility classes are defined, such as clearfix and error classes, etc. So using react-css-modules, it would look something like this: <div className="clearfix" styleName="app-header">{...}</div>

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

Again, not sure if this is correct.

我要在开发开源项目时坚持最佳实践，并希望以最佳方式完成它.感谢您的任何建议！

I want to stick to best practices as I'm working on an open-source project and want it to be done in the best way possible. Thanks for any advice!

推荐答案

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

css-modules provides :global that can be used to include locally in your code css files that will included globally in application

这篇关于在CSS模块中使用全局CSS文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！