具有 PostCSS / CSS 模块的全局实用程序类

Posted 2023-03-06

【中文标题】具有 PostCSS / CSS 模块的全局实用程序类

【英文标题】：Global Utility Classes with PostCSS / CSS Modules

【发布时间】：2016-03-13 23:57:36

【问题描述】：

使用CSS Modules，如何在不重复样式声明的情况下将全局实用程序类应用于多个元素？

例如，这是一个没有 CSS 模块的 React 组件。相关行是 div 有两个类：widget 和 clearfix...

/* components/widget.jsx */

class Widget extends Component 
  render() 
    return (
      <div className="widget clearfix">
        <div className="widget-alpha">Alpha</div>
        <div className="widget-beta">Beta</div>
      </div>
    );
  

.clearfix 是一个全局实用程序类，我想将其应用于整个应用程序的许多元素：

/* util/clearfix.scss */

.clearfix 
  &:before, &:after  content: " "; display: table; 
  &:after  clear: both; 

我见过将.clearfix 导入CSS 模块的各种方法，但在每种情况下，样式声明都会针对应用类的每次出现重新定义。这是一个例子：

/* widget.scss */

.widget 
  // other styles
  composes: clearfix from '../util/clearfix.scss';

【参考方案1】：

通过反复试验，我发现您可以在使用实用程序类的选择器中声明:global（而不是定义它的位置）：

.widget 

  // other styles

  :global 
    composes: clearfix;
  

为了避免混乱和重复的import 和from 语句，我使用index.scss 文件来导入实用程序文件，然后在需要实用程序类的任何部分导入。