问题标签 [react-css-modules]

我正在使用 React/Redux 和 CSS 模块开发一个 Web 应用程序。对于单元测试，我使用identity-obj-proxy来模拟我的 CSS 导入。

然而，QA 团队想知道在使用 Selenium 时如何处理混淆的类名（我自己完全不熟悉）。我能找到的唯一提到的两者是这个问题，但接受的答案对 QA 来说并不清楚。

在这种情况下使用 Selenium 的一些解决方案是什么（最好是一个易于理解的答案，我可以去 QA 团队）？

我试图用 CSS 组件解决一个场景：我有一个使用自己的类的反应组件。这个组件有一个小助手子组件，它也有自己的类。现在：当设置主组件中的特定状态并应用特定类时，辅助组件的 css 应该对该类做出反应。

例如：

• 组件 A 使用组件 B 来展示一些东西。
• 组件 A 被点击并反应在该组件上设置一个“点击”类
• 然后组件 B 应该对该类做出视觉反应

在纯 CSS（或类似的）中，我会这样做：

组分 A：

B组份

我知道有一种反应方式可以做到这一点。这种事情应该用在组件之间传递的状态和道具来完成，这样就可以完全避免这种情况。但是我目前正在重构一个仍然存在这些问题的项目，并且我真的不知道如何使用 react-css-modules 正确地做到这一点。

顺便说一句：我目前的解决方法是使用 :global 但我真的非常想避免这种情况......

覆盖 css 类/自定义 react-bootstrap 组件的最佳方法是什么？- （我已阅读文档，除非我遗漏了什么，否则不包括在内）。

根据我的阅读，它似乎是在内联样式（镭）和 css 模块之间的选择，但哪个更好，为什么？

我有一个_color.scss包含 400 种颜色作为变量的文件。我喜欢 20 个组件，它们的样式需要这种颜色变量。

我正在使用 SCSS + CSS 模块来构建我的样式。截至目前，我正在将其导入_color.scss每个组件的style.scss.

例子：

组件1.scss

组件2.scss

组件3.scss

以前，当我单独使用 SCSS 时，我将导入color.scss到 myindex.scss并导入它下面的所有其他样式。这样，变量将在所有组件中可用。

例子：

现在，下面的所有变量都将在和下_color.scss可用。component1.scsscomponent2.scsscomponent3.scss

有没有办法做类似的事情CSS Modules + SCSS？一个声明全局变量的地方？

我正在尝试使用 Jest、React 和 PostCSS 运行测试。在没有 react-css-modules 的情况下，我可以使用className={styles.*}. 还尝试了对于 CSS 模块，您可以使用 ES2015 代理，但没有帮助。

失败的测试：

堆栈跟踪：

现在我正在将我当前的项目从Webpack 1to移动Webpack 2，我遇到了一些以前运行良好的 css 模块问题。特别是，我使用css-loaderand react-css-modules。我目前的开发配置如下：

它工作正常。对于生产，我使用ExtractTextPlugin（版本 2.0.0-beta.4），我的 Webpack 配置是这样的：

在这种情况下，构建失败并出现以下错误：

所以它似乎没有预先添加本地前缀。文档中也提到了css-loader：

注意：对于使用 extract-text-webpack-plugin 进行预渲染，您应该在预渲染包中使用 css-loader/locals 而不是 style-loader!css-loader。它不嵌入 CSS，只导出标识符映射。

所以我尝试了 loader: 'css-loader/locals' 并将其添加到选项中，但不幸的是，没有任何效果。

我也尝试用 postcsspostcss-modules插件解决这个问题。它修复了构建，但是当我尝试启动我的应用程序时，它看起来没有适当的 css 名称映射导入。

反应：

厄运节点：

CSS样式：

webpack.config：

我想将 css 模块添加到我的 React 项目中，就像 instagram with react-css-modules.

但是发现2个问题：

1：我可以部分使用css-module吗？所有的子节点HomePageContainer-home-page-wrap-Ql_jW都失去了css样式，同理home-page-wrap-normal。

看来我应该在整个项目中将className替换为sytleName。有什么方法可以选择使用 styleName 和 className 并显示正确的 css 样式。

2：我可以在开发模式中开源地图吗？base64 的类不可读，我需要一个 sourceMap 将原始类名与编译后的类名连接起来。

我希望能够在我的应用程序“src”的根目录中有一个文件夹，其中包含可重用的 css，我可以在 css 模块中编写它

在我的 css 中，我的班级没有，composes: table from './../../../css-vars/index.css';但我试图能够使用composes: table from 'css-vars/index.css';并让它解析到我的项目的根目录。目前，当我尝试这个时，我得到了这个错误：

这是我的 css 加载器的样子：

任何想法？

我通过在我的源代码中添加路径解决了 postcss smart-import 的类似问题。css-loader 是否有类似的解决方案？我注意到有一个根查询参数，但添加并没有帮助

我正在尝试在我的 React 项目中使用 css 模块。我能够执行以下操作：

我的样式是从 CSS 中提取并成功添加前缀的。但是，当我尝试使用 CSS 模块的“组合”功能时，它似乎被完全忽略了。我什至没有从其他文件导入 - 只是试图编写本地类。但是，当我克隆演示项目（https://github.com/gajus/babel-plugin-react-css-modules/tree/master/demo）并在 CSS 中添加“composes”时，它可以工作。我看不出我的代码和演示中的代码有什么区别......

我的 webpack 加载器是：

这是我的 .babelrc：

我有一个 React 项目，它使用 CSS 模块（用于组件）+ React-Bootstrap 和 CDN 托管的 CSS。

我有一个要求，当我的应用程序加载（每个用户）时，我调用一个端点以获得动态样式指南。为简单起见，它会是这样的：

{ "color_background": "#edeae3", "color_error": "#9e2d2d", "color_highlight": "#69b5ce", "color_success": "#498e49", }

然后应用程序应该以这些颜色呈现。我知道有自定义静态引导样式的能力（例如http://getbootstrap.com/customize/），但我不知道如何动态地做到这一点。

任何指导将不胜感激。