小编flo*_*roz的帖子

我正在将我的项目中的全局 SASS 迁移到 SCSS 模块中，该项目混合了全局 scss 和某种自定义的类似引导程序的框架。

我在应用程序中到处都有需要重构的全局样式引用

我的目标是跨 CSS 模块共享样式以重用主题、按钮等。 不幸的是，CSS 模块的“组合”功能无法编译 SASS。

这似乎是一个已知问题：

https://github.com/facebook/create-react-app/issues/7596

跨 CSS 模块快速引用共享 .scss 类的最佳策略是什么？

我有 main.scss，我在其中加载全局应用程序中使用的文件：

    :global {
      @import './button';
    }

在 sass/_button.scss 中：

    .btn {
      font-family: $baseFont;
      font-size: $text--m;
      font-weight: normal;
      text-align: center;
      outline: none;
      white-space: nowrap;
      padding: $padding--xs $padding--m;
      color: var(--white);
      background-color: var(--dark-blue);
      border: 1px solid var(--sky-blue-dark);
      border-radius: 4px;
      transition: all 100ms, color 100ms;
      box-shadow: 2px 3px 6px 0 var(--black-half);
      cursor: pointer;

在我的 Header.jsx 组件中

    <div className={styles.popContainer}>
            <button …