问题标签 [css-modules]

我正在尝试更改div颜色值更改时的背景。这是我接收颜色值的函数：

这是css类

这是我的 div 元素，其背景需要在运行时更新。

我不确定 refs synatx 所以请帮助解决这个问题。谢谢。

我在 React 应用程序中使用CSS 模块。我还有一个带有一些全局样式的下拉组件（我很满意，因为我想重复使用的一般样式）。

当下拉菜单处于活动状态时，将应用 CSS 类 ( .dropdown--active)。有没有办法可以在组件的本地范围样式旁边包含该全局类？即，我想要的是这个工作：

但是，该语法使整个选择器成为全局的，这不是我所追求的：我希望.myClass将范围限定为组件。

我有一个与 CSS 模块一起使用的 ReactCSSTransitionGroup（以及来自 react-router 的动态路由，但我相信这可以按预期工作）。

和过渡完美appear地leave工作 - 但enter过渡没有 - 它们只是立即出现，在新组件进入后前一个组件淡出。

CSS（使用 CSS 模块）：

- - 编辑 - -

我发现它在子路线上按预期工作（我的应用程序中只有一小部分）。包括子路由在内的所有路由都是动态加载的，所以我仍然不确定是什么原因导致它在这些情况下工作，但在其他情况下却不行。

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

我的 webpack 是：

我正在使用 ExtractTextPlugin，我只是添加了参数：

在 css 和 scss 加载程序中。

我的反应组件是：

我的 test.css 是：

但它<nav></nav>没有类渲染。

谁能帮我？

我正在使用 Babel 和 ES6 语法使用 React 编写指示器组件，并为我使用 CSS 模块的组件设置样式。该组件工作正常，但我想提高我的代码质量。

在指示器的每个状态中，点的颜色都会发生变化。

定义样式的 CSS 使用 CSS 模块和 composes 关键字

我对这种方法有两个问题：

• 将所有使用的颜色重新分配给一个类，然后根据条件分配它有点麻烦。有什么我想念的吗？
• 有没有更好的方法来处理 React 中的 state 和 classNames 分配？这是一个简单的例子，但我在其他代码中有一些非常讨厌的条件，我想避免它们。

我一直在研究react-css-modules但到目前为止，我认为我不介意在代码中使用 styles.class。

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

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

使用 SASS 时出现以下错误map-get。

只有当我同时使用 thesass-loader和另一个 loader 时才会发生这种情况。

我首先认为这是由 PostCSS 加载器引起的，但似乎是 sass 加载导致问题，而不是在使用css-modules.

我创建了一个示例 repo 来说明问题：https ://github.com/tiemevanveen/sass-css-components-fail-example 。

您可以使用不同的分支进行测试：

• master: CSS 模块 + SASS
• postcssCSS 模块 + SASS + PostCSS
• log-source：使用 CSS 模块 + SASS +自定义源日志记录模块
• no-css-modules: SASS +自定义源日志模块

只有第一个和最后一个分支运行没有错误。

我创建了日志源示例以查看 sass-loader 返回的内容，并且看起来它没有转换 sass（但这也可能是我误解了加载程序的工作方式）。

没有 css 模块的另一个示例确实显示了正确的转换代码..

我很困惑为什么 master 分支（没有 postcss 或其他自定义加载器）工作正常。

我已经提出了一个问题，但我认为这在 StackOverflow 上有更多的机会，因为它是一个非常具体的问题，可能更多的是一个配置问题。这是我的 webpack 配置：

TLDR：如何css-modules与 normal结合sass，最好在webpack.

设置：

我正在研究电子商务网站的样式构建过程。该站点的样式目前通过gulp browserify构建过程在sass中与js一起完成。

我最近添加了一个使用react with webpack和babel构建的单页应用程序。在该应用程序内部，我利用webpack提供的css-modules将类名限定为每个反应组件。

问题：

我想将 webpackcss-modules构建中的样式与站点的主要样式包合并。为此，我正在考虑构建一个 webpack 配置来构建整个站点的样式。我遇到的问题是如何获取当前由单页 webpack 配置构建的样式，并将样式块注入到处理整个站点样式的全局 webpack 配置中。我应该提一下，我想将这两种配置尽可能分开

问题：

• 有没有一种合适的方法来解耦 webpack 构建，其中一个仍然能够使用另一个块？

• 如果是这样，我该怎么做才能使css-module设置保持在单页配置中，并且extract-text-webpack与无聊的 sass 构建一起进入全局配置的部分？

• 如果没有，我应该如何让 sass 的一部分通过css-modules工作流程，并且仍然将它与站点其余部分的捆绑包结合起来。

提前致谢。

根据@Alexandr Subbotin 的回答进行编辑，我已经更新了我的 webpack，使其看起来像下面的代码。由于代码属于我的雇主，我确实不得不更改名称和路径，所以可能会有轻微的错误。

在我正在处理的一个项目中，我们使用带有postcss(alsopostcss-cssnext和postcss-include) 的 css 模块。我们还将引导程序作为全局提供的依赖项。

在给定的组件中，我确实有一个按钮的自定义类。所以我的按钮有以下类：btn btn-custom.

根据要求我想修改按钮处于活动状态时的外观。对于该引导程序具有以下选择器：.btn.active, .btn:active. 覆盖伪类是容易的部分。不过，这.active门课是棘手的地方。

在我的 css 文件中，我尝试了几种方法来处理这个问题，但似乎都没有。以下是我尝试过的一些事情：

有没有人知道如何实现这一目标？

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

此代码的日志：

返回对象 {}

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

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

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

这是我的 webpack.config.js

谁能帮我？

提前致谢。