问题标签 [react-css-modules]

I'm trying to setup a React project with react-css-modules, webpack and Hot Module Replacement. Everything is working like a charm but I can't get the CSS sourcemaps to work.

I followed this guide to make HMR work. It involves a BrowserSync setup to update the css file after Webpack writes it to disk.

I use (as suggested by react-css-modules) the ExtractTextPlugin to extract all of the css:

But if I change this to sourcemaps, as suggested here

I get the error: "root" CSS module is undefined. in my browser console.

You can find my example repo here, but here's the full webpack config I'm using for development.

How to make the sourcemap work?

我想在用 Typescript 编写的 React 应用程序中将 css-loader 与 webpack 的“模块”选项一起使用。这个例子是我的起点（他们使用 Babel、webpack 和 React）。

网络包配置

这是我想用随附的 CSS 文件设置样式的 React 组件：

树.css

无论我在做什么（尝试更改导入语法，尝试为 ts-loader 声明 'require'，在此处描述，我总是得到：

未捕获的错误：找不到模块“../../../css/tree.css”

在运行时和

错误 TS2307：找不到模块“../../../css/tree.css”。

由 TS 编译器。发生了什么？在我看来，css-loader 甚至没有发出 ICSS？还是 ts-loader 行为错误？

编辑：Meteor 1.3 版本已经发布，一个npm 包即将发布，允许在没有 Webpack 的情况下直接使用 CSS 模块

我想通过 NPM 在 Meteor 1.3中使用https://github.com/gajus/react-css-modules 。但是自述文件说要使用 Webpack。我从未使用过 Webpack，因为在我看来，它的构建工作与 Meteor 相同。

那么你知道在这种特定情况下在 Meteor 1.3 beta 中使用 React Module CSS 的方法吗？

我正在设置react-css-modules。在自述文件之后，我添加了两个文件：

cssModulesDemoPage.js

cssModulesDemoPage-style.css

我按照webpack安装的设置说明进行操作：

• 样式加载器
• CSS加载器
• 将加载器添加到 webpack.config.dev.js

当我导航到此页面时，我收到一个神秘的错误：

未捕获的 TypeError：type.toUpperCase 不是函数

我尝试按照webpack 演示。语法不同，所以对我来说不是很有用。

下面是我的 Greeter.jsx 文件：

下面是我的 main.js 文件：

我使用postcss-modules 和 react-css-modules来隔离组件内的选择器，因此，当文件加载时，类名变成类似于 _3lmHzYQ1tO8xPJFY8ewQax 的东西。

例子：

下面是 react-bootstrap 如何给我输出：

由于我使用 bsStyle (react-bootstrap) 而不是 styleName(react-css-modules) 并没有被隔离，因此我无法将引导 css 样式应用于元素。

有没有办法通过隔离它的类来使用 react-bootstrap 以匹配 postcss-modules 生成的输出？

感谢期待。

鉴于下面的 Webpack 构建，我如何集成 CSS-Modules（Webpack 配置下方链接中的 Web 包的链接和示例）。

这是 CSS 模块的链接 https://github.com/css-modules/webpack-demo

这是一个例子：

处理以下场景的模块化方式是什么：应用程序具有所有标题标签（h1、h2、h3 等）的通用样式。一个特定的组件 Widget.jsx 可以使用这些标题中的任何一个，但对 h1 标签有特殊的样式。在 CSS 的“旧”时代，我会通过（可能）单个样式表中的继承来处理这个问题。例如

显然，以上内容不适合 CSS 的模块化方法，但我不确定如何以模块化方式完成上述场景。接下来是我解决问题的初步尝试。

小部件.jsx

_widget.less

原子/文本/_text.less

它一直有效，直到使用通用的、未修改的类之一（.h2）。显然，问题在于这些类.h2没有定义_widget.less并且没有“全局”定义（与模块化 CSS 最佳实践保持一致），但我倾向于认为将其他标题类显式组合到.h2, .h3, .h4 ...类中并不是要么回答。例如

_widget.less

另一个可能的解决方案是@import将一般标题样式放入_widget.less文件中。

_widget.less

该解决方案的问题在于，每次我使用来自可交付代码的样式_text.less并膨胀我的可交付代码时，这些样式都会被复制。

关于如何最好地解决此类问题的任何想法？我对模块化 CSS 的概念很陌生。

在带有CSS 模块的 React/Webpack 应用程序中，我.card在它自己的 .scss 文件中有一个模块，另一个名为的模块.stat是要在 .scss 文件中显示的内容.card。

我需要实现以下目标，但采用“css-modules”方式：

.card如果我在模块内@import .stat，所有的.cardcss 都会被转储到.stat输出中，但我只想能够为.card.

解决问题的正确方法是什么？

我有一个名为 ColorInput 的可重用组件。

但是，每个输入都有不同的文本颜色。因此，我为每个输入设置了不同的类。例如，红色输入、绿色输入、蓝色输入。

SCSS

颜色输入组件

}

StyleName 没有输出到正确的类。

我知道这可能是一个报告的问题，但是，我不确定我是否有同样的问题。

更新：我计划尽快包含一个现场演示。

我的应用程序在没有路由器的情况下工作得很好。我正在使用这个nathantreid:css-modules包，它允许你的 react 组件使用模块化 css。在我的 imports/ui/Navbar 目录中，我有 Navbar.jsx，其中包含：

当我让应用程序加载 client/main.jsx 中的组件时，使用以下内容：

它可以工作，但是当我添加反应或流路由器并创建路由时它不起作用：

它抛出以下内容：

对于我如何解决此问题的任何技术见解，我将不胜感激。

另外我想指出，我尝试过相对路径和绝对路径，但基本问题是它只在我添加路由器时查找 NPM 包（或者至少这是我对正在发生的事情的解释）。