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

Question

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

例如，这是一个没有 CSS 模块的 React 组件。相关行是 div 和两个 classes：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 是一个全局实用程序 class，我想将其应用于整个应用程序中的许多元素：

/* util/clearfix.scss */

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

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

/* widget.scss */

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

Answer 1

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

.widget {

  // other styles

  :global {
    composes: clearfix;
  }
}

为了避免混乱和重复的 import 和 from 语句，我使用 index.scss 文件来导入实用程序文件，然后将其导入实用程序 class 是必需的。