问题标签 [css-modules]

关于 css-modules的文档非常稀少，所以我不确定我是否可以这样做。

这篇文章说我设置按钮样式normal和error状态的方式如下所示：

但我更喜欢这样写：

就像我一直做的那样，没有引入这个新的composes语法。我认为如果我实际上可以将它们嵌套在代码中，那么哪些样式建立在其他样式之上会更清楚。

但我不知道 css-modules 会导出什么？他们给出的唯一例子是简单的类名选择器。我不知道.common.normal将导出为什么，或者什么.common > .normal ~ .strange？如果我使用 css-modules，我基本上不必使用任何类型的 CSS 选择器吗？

我正在尝试在 React 和 css 模块中使用诸如font-awesome和Foundation之类的东西，但我不知道如何正确地将它们导入我的项目中。

请注意，我正在使用HotModuleReplacementPluginandExtractTextPlugin来获取单个 css 文件。

在顶级组件的 css 文件中的某个地方我希望能够做到，@import 'font-awesome';但我该怎么做才能使文件按原样处理并且类最终不会本地化font_awesome__fa-check等等？

这是我的 webpack 配置：

谢谢。

我正在使用css 模块和post-css。我添加了post-css-simple-vars插件

颜色.css

在我的button.css文件中，如何使用组合以便可以重用变量colors.css？

按钮.css

如果我有一个反应组件并且我想传入一个类名，我该如何使用 CSS 模块来做到这一点。它目前只给出了 className 而不是我会得到的散列生成的 css 模块名称 <div className={styles.tile + ' ' + styles.blue}>

这是我的Tile.js组件

瓷砖.css

如您所见，我在我的 Author Tile 中按如下方式初始化了这个 Tile 包装器组件，但我想将颜色道具传递给组件：

作者Tile.js

我正在学习如何使用css modulesreact，下面是一个复选框的工作示例，这里是它的样子（纯 HTML + CSS fiddle）没有反应。

这很好，但假设我的客户回来并希望我更改复选框颜色。好吧，看起来很容易吗？上面的小提琴显示有几个十六进制代码（#479ccf）用于边框和 SVG 背景图像。理想情况下，我可以传递一个 react 道具，让你可以做这样的事情<Checkbox color="#666333"/>并责备！但是我找不到任何文档/方法来获取从组件到 CSS 文件的信息。

这是什么意思？

我知道反应社区会说什么，那套特定的 CSS 并不理想。它可以在组件内用 javascript 编写，然后您可以将复选框片段的内联样式设置为道具颜色。我很确定这是可能的。这是必要的吗？我不得不重构::after代码，关于那个的问题。

我开始制作 SVG 函数。

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

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

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

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

我正在为我的项目使用 css 模块，并且我有一个文件定位.css，其中包含一些我想要导入的有用类。例如.right, .left

使用 CSS 模块的最佳方法是什么？

目前我可以看到 2 个选项，但它们并不是那么好：

组件样式中的组合

或者

组件中的多个 css 模块导入

我正在使用 css 模块，但是我在组件中使用的一个库以使用 JavaScript 附加推文，以以下结构将一些元素添加到我的组件中：

我现在想在我的 css 模块中为组件设置这些元素的样式，如下所示：

我的组件.css

但是，当然，由于 webpack 加载器中的哈希命名，现在我的.user类发生了变化。.MyComponent__user___HZWfM

如何在我的 css 模块中设置全局样式？

我有一个关于作文的问题，希望有人能帮助我。我正在使用react-css-modulesSass，我想知道为我们的基本底层组件之一组合事物的最佳方式。

这是我们的组件：

这是到目前为止的样式表：

目前来看，还挺痛苦的。我们添加的每个可配置道具都会以指数方式增加我们必须提供的组合类的数量。我们目前可以配置alignand type，并且由于两者都可以为 null 我们有 6 种可能的组合，因此除了 base 之外还要创建 5 个组合类.button。如果我们只添加一个道具，比如一个 boolean bold，我们现在必须添加一大堆新的组合类名：.button-bold, .button-left-bold, .button-right-bold, .button-primary-bold, .button-primary-left-bold, .button-primary-right-bold.

我知道react-css-modules我们可以启用该allowMultiple设置以允许我们指定多个模块以应用于一个元素，但我的理解是这违反了最佳实践。我觉得我们必须在这里遗漏一些东西。我们做错了什么？

我正在尝试使用webpackand创建一个包含多个条目的 React 应用程序extract-text-webpack-plugin。

我的配置文件看起来像这样，

我的问题是extract-text-webpack-plugin只包括从入口块导入的 css 文件，而不是从入口块的子模块。

所以如果app.entry.js有

然后来自的样式app-style.css被捆绑，但不是来自sub-style.css.

我之前只有一个条目文件时没有遇到过这个问题，所以我想知道是否有多个条目需要另一个设置？

还需要考虑的是 CSSModules 的使用方式css-loader，这也可能是一个因素。

有任何想法吗？