问题标签 [react-css-modules]

我目前正在使用带有 React 的 CSS 模块作为我的样式。因此，我的每个组件都在其组件特定的 css 文件中导入，如下所示：

这在为单个组件设置样式时效果很好，但是如何应用不是特定于组件的全局样式（html、正文、标题标签、div 等）？

下面是一个用于显示错误消息的简单组件：

请注意，它需要message属性。现在，如果我在某处使用此组件：

Flowtype 应该警告我Error缺少必需的属性message，但事实并非如此。如果我不Error使用 react-css-modules 包装我的组件，Flowtype 会按预期工作。

我在想我需要为 Flowtype 声明一个类型才能理解包装的组件，但我的 Google-fu 没有产生任何结果。

我所做的发现：

• https://github.com/facebook/flow/issues/1601
• 流类型：带有 cloneElement 的 HOC

我正在尝试测试使用React CSS 模块的组件的生成类

这是一个示例Foo组件：

测试代码（Foo.spec.jsx）：

Foo.css 代码：

这是测试 html 输出：

如您所见，它生成一个没有任何类的空 div，因此没有断言有效。

另外我想提出这样一个事实，即这只在测试中失败，组件在 Web 应用程序生成的 html 代码中生成预期的 html 类。

知道如何解决这个问题吗？

更新

正如 fabio 在评论中所建议的那样，我试图删除该选项errorWhenNotFound: false

现在测试给出以下错误信息：

错误：“bar”CSS 模块未定义。

我不明白，因为 bar 类是在Foo.css文件中定义的。

我还发现，如果我调试Foo组件中的样式：

它返回一个空输出：

风格{}

尽管在这个简化的示例和完整的代码中，组件都会在 Web 应用程序生成的 html 代码中生成预期的 html 类，并且相应的样式可以正常工作。

我正在尝试将 React CSS Modules 添加到我的项目中，但我遇到了 eslint 的问题。我的登录视图如下所示：

这是我原来的 .eslintrc 文件，在添加导入/忽略设置之前：

通过 eslint 运行它会给我 2 个错误：

当我将以下设置添加到 .eslintrc 文件时：

解析错误消失了，但以下错误取而代之：

关于如何让 eslint 与 React CSS 模块一起玩的任何建议？

我正在对 React 进行一些调查，并开始尝试使用 sass-loader 来处理 CSS/SCSS 模块。我已经完成了大部分设置，但是我遇到了一个我不确定如何解决的问题，我在以下场景中介绍了它：

组件A.jsx

组件B.jsx

webpack.config.js

从这个设置中，Webpack 按预期工作并创建了新文件style.css（当然，实际上我正在开发中），但是...... SCSS 内容文件没有按照我认为的顺序呈现。

生成的style.css内容排列为：

• ComponentB.scss 内容
• ComponentA.scss 内容

代替：

• ComponentA.scss 内容
• ComponentB.scss 内容

正如我的意思是它在层次结构上。这是一个问题，因为对于覆盖Component A基本 CSS，我需要 webpack 和 sass-loader 以按层次结构顺序合并文件。

因此，在此之后，问题将是：

如何配置 sass-loader 以在模块通过树时加载模块？

甚至更简单...

有一个更好的方法吗？

我在全局 style.css 中有这个：

...这在反应组件的 style.css 中：

在组件本身中：

我收到一个错误：没有为font.

我正在尝试在 react 中使用 css 模块，但它不起作用。

此代码的日志：

返回对象 {}

并且呈现的代码是没有类的标签：

css 代码可在网站上找到，这是我的 test.css：

如果我将 div 更改为 class='test'，则 p 的颜色变为蓝色

这是我的 webpack.config.js

谁能帮我？

提前致谢。

我想要一个文件来存储我将在我的 css 样式中使用的颜色和其他一些设置。因为我不想在不同的文件中多次指定相同的颜色。如何使用 css 模块实现这一目标？

例如：setting.css

按钮/styles.css

所以，我使用 CSS Modules webpack loader：

css?modules&importLoaders=1&localIdentName=[path]_[name]_[local]_[hash:base64:5]

我想将每个styleName属性不仅编译为通常生成的通用类名，而且还编译为另一个更简单的类。

例如：代码

<div styleName="CLASS-NAME" />

现在编译为

<div class="path_filename_CLASS-NAME_12345" />

我希望它编译成

<div class="_CLASS-NAME path_filename_CLASS-NAME_12345" />

我的应用程序和组件的名称间距有以下约定：

我想使用 CSS 模块，但是，我不确定如何转换它并保持应用程序和组件名称间距的相同特性。我知道我可以简单地省略整个#app-nameID，但我想要这种特异性。

想法？