我有几个简单的 React 组件，每个组件都在各自的文件夹中使用自己的 React CSS 模块。 CSS是基本的，但我有它的工作。我正在使用 Webpack 2 进行构建。
我的问题是如何将另一个 CSS 模块中的公共 CSS 片段共享到两个 React CSS 模块中？
我不确定我是否应该有一个只包含公共 CSS 模块的文件夹，然后将它导入到两个 React 组件中。如果是这样，我如何引用/引用常见的 CSS。
我已经阅读了文档，但我仍然感到困惑。
有没有类似于 SASS 或 Less 包含/组合的方法？
我知道这可能会破坏孤立组件的模式，但在我的简单案例中，我有一些 CSS 可以制作一个带有略微透明边框的按钮，并且所有反应组件都可以使用它会很好。我想我可以将这个 CSS 放置为一个常见的 .css 文件并让 Webpack 捆绑它，然后将其用作 className={....}
【问题讨论】：
根据您的设置，执行此操作的正确方法是使用 CSS 模块的 composes 功能
这允许您定义本地化类规则，并将其导入其他本地化类规则，甚至跨文件
MyCommonStyles.css
/* base button styles */
.button {
background: #000;
color: #fff;
}
MyModule1.css
/* use base button styles and override the color */
.loginButton {
composes: button from './MyCommonStyles.css';
color: #00ff00;
}
我知道这可能会破坏孤立组件的模式
在 CSS 模块领域中，跨模块共享 sn-ps 代码没有任何问题 - 远非如此，这是内置的，如果反复重新创建相同的样式会适得其反 - 只要不是使用全局 CSS 完成
不管它的价值如何，使用建议的 CSS 自定义属性 @apply 可以通过不同的方式实现相同的目的，您现在可以通过 postcss (https://github.com/postcss/postcss-custom-properties) 使用它。任何一种方法都很好，但我鼓励您也尝试组合使用，以创建可以跨 CSS 模块共享的通用 var 或 sn-ps。它是创建具有标准化主题的组件的好方法，仍然使用纯本地化的 CSS
【讨论】：
我想我可以把这个 CSS 放在一个普通的 .css 文件中 Webpack 捆绑它，然后将其用作 className={....}
您说得对，因为实际上您正在构建一个单页应用程序，这意味着所有内容都将被添加到一起，之后就只有 HTML、CSS 和 javascript。你可以像往常一样声明你的 CSS 样式，然后在你的渲染方法中设置一些 className 或 id
【讨论】：