问题标签 [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?

我一直在使用 Webpack、Sass 和 CSS 模块构建一个项目。通常在我的.scss文件中，我定义一个类，如：

在我的 React 组件中，在render方法中，我需要样式：

世界上一切都很好。一切都按预期工作。

现在，今天我正在阅读CSS 模块页面，并注意到没有一个选择器包含在:local()我的范围内，而且他们正在导入如下样式：

我想“哇，看起来好多了，更容易看到它是在哪里导入的，等等。而且我不想使用:local()，默认情况下只有本地的东西。” 所以我尝试了一下，并立即遇到了几个问题。

1) `从'./MyStyles.scss'导入样式；

因为我在我的 React 文件上使用 ESLint，我立即收到一个错误，该错误MyStyles.scss没有默认导出，这通常是有意义的，但 CSS 模块页面指出：

从 JS 模块导入 CSS 模块时，它会导出一个具有从本地名称到全局名称的所有映射的对象。

所以我自然希望样式表的默认导出也是他们所指的对象。

2）我试过import { button } from './MyStyles.scss';

这会通过 linting 但button记录为未定义。

3) 如果我恢复到require导入样式的方法，则未指定的任何内容:local都是未定义的。

作为参考，我的 webpack 加载器（我还包括Node-Neat和Node-Bourbon，两个很棒的库）：

在所有这些之后，我的问题是：

1）当使用带有 Sass 的 CSS 模块时，我是否仅限于使用:local或者:global？

2）由于我使用的是 webpack，这是否也意味着我只能使用require我的样式？

假设我有一个名为 React 的模块，其中嵌套nav了多个<li>和标签。<a>使用 CSS 模块，我如何拥有“可继承”或“级联”规则，例如：

看来我只能将一种样式直接应用于一个元素？

我正在学习如何使用 postcss-bem 生成 bem 样式的 css 文件，但我想知道是否有一些像 CSS-Modules 或 Postcss-JS 这样的包，我可以用它来执行以下操作：

我在 CSS-Modules 和 Postcss-JS 的文档中发现了这个特性，但是当我尝试使用 webpack 的 postcss-loader 和 postcss-JS 来解析 postcss-bem.css

加载器：["style-loader","css-loader","postcss-loader?parser=postcss-js"]

但我得到了这样的错误

模块构建失败：SyntaxError: Unexpected token ILLEGAL

我做错了吗？

我正在设计我的反应应用程序。我正在使用带有 webpack 的 css 模块。这是我的配置：

我设计了我的组件，煮了一杯咖啡，但现在它不工作了。所以我有一个我想使用的样式表。我正在导入它：

但是，当我打破我的组件时，styles没有定义。我的样式现在都没有被应用。这是我如何使用它的示例：

为什么会styles是空的？

我有一个最小的 React 组件，它由两个文件组成：button.jsx和button.less. 样式被导入并且类名被附加一个散列以使所有样式对组件都是本地的。

这很棒，但我想将所有组件代码放在一个文件中。是否可以在不丢失 css 模块化的情况下内联 jsx 文件中的样式？

当前代码

按钮.jsx

无按钮

webpack.config.js（相关位）

我想写什么

按钮.jsx

受 vue.js 和vue-loader的启发。

我相信这是这个未回答问题的重复： Using css-loader inline with Webpack + React

内置的 CSS Modules 支持webpack看起来很简单：你只需在require/ importCSS 文件和 webpack 生成代码，它会做两件事：

• 将生成的 CSS 注入您的网页
• 返回您要使用的类名字典。

用法也很简单：

我想测试替代 CSS Modules 实现，一个PostCSS插件 - 因为它似乎与其他PostCSS插件配合得很好，尤其是autoprefixer. 但根据官方文档，与CSS 模块postcss-modules相比，它的工作方式似乎非常不同。webpack文档中没有使用示例，只有一些生成的回调代码JSON。任何示例如何在实践中使用它来实现与上面的示例代码相同的目标？

我有一个项目，其中包含一组 css 文件（每个反应组件一个）。我在 webpack 和 postcss-cssnext 中使用 css-loader（带有模块）。

理想情况下，我想要一个variables.css，这样我就可以在 css 文件中共享变量。我尝试过variables.css包含以下内容：

然后我将其导入，以便通过 css 加载程序。问题是，其他文件不接受这些变量，所以要么这不起作用，要么我做错了什么（包括在组件 css 文件中直接起作用）。

一个有效的方法是拥有一个styles.json具有以下 webpack 设置的文件：

主要问题是每次更改变量时都必须重新启动 webpack 开发服务器（因此重新加载 webpack 配置）。这并不理想。

那么，有什么更好的方法来做到这一点吗？

我正在使用一个 React 组件库（React Toolbox），它使用 CSS 模块和 Webpack 在其 Tab 组件中输出此类：label___1nGy active___1Jur tab___Le7N这tab是我传递的 className 道具。和label类active来自图书馆。我想在 上应用一组不同的样式active，例如.tab.activewheretab指的是我创建的样式并active匹配库创建的生成选择器，但无法弄清楚如何使用 css-modules 执行此操作。我需要覆盖这个动态选择器：.label___1nGy.active___1Jur。

[ ]] 2 [ ] 3

我在一个新的 React 项目中使用 CSS 模块（通过 Webpack css 加载器），即使它工作得很好，我也无法让React Select的 SCSS工作。我想这是因为它试图创建localJSreact-select不知道的类名。有没有办法导入整个.scss文件，但范围是全局而不是本地？