我正在使用 babel-plugin-react-css-modules。这是我对 webpack 的配置。

当我添加这样的东西时，在我的组件内部

在我的css文件中我添加了这个

一切都与样式有关，但是如果我检查元素，这就是我所看到的

它是生成的 css 模块名称。我可以在检查元素时以某种方式映射它并显示原始类名“feature-one”吗？

我正在尝试babel-plugin-react-css-modules在带有 webpack 和 SSR 的反应应用程序中使用。但是，别名 import 语句Cannot find module在 webpack 中显示错误。如果我像这样使用 scss 文件的相对路径，../../styles/file.module.scss那么 webpack 能够解析它。

我正在尝试在我自己的应用程序中为其组件包含另一个库的 css。作为参考，我正在尝试使用这个数据表库：https ://github.com/filipdanic/spicy-datatable 。

在文档中，它指出Out of the box, spicy-datatable is bare-bones. Include this CSS starter file in your project to get the look from the demo. Edit it to suit your needs.

我尝试在我正在构建的组件顶部导入样式表，如下所示：import * as spicy from 'spicy-datatable/src/sample-styles.css';在我自己的组件文件中。它没有样式。我尝试将原始代码放入我index.scss文件assets/styles夹中的文件中 - 没有用。我试着把它放在我自己的样式文件中./component.scss——没有用。

我目前将它们设置为：

并且出现错误：

Module parse failed: Unexpected token (4:0) You may need an appropriate loader to handle this file type.

webpack.config.js

.babelrc

我不确定是否需要添加一些东西来专门处理.css文件，这是我第一次使用 CSS 模块。我认为 react-css-modules 是这样做的，所以我不太确定为什么 CSS 文件没有正确加载。

编辑：

编辑了我的 webpack 以包含 CSS：

错误消失了，但样式仍然没有出现。

我正在尝试开始使用react-css-modulesw/ babel-plugin-react-css-modules。目前我有一个运行反应的电子锻造应用程序。

我的.compilerc样子如下：

我的理解.compilerc类似于.babelrc（我没有.babelrc文件），请参阅：电子编译（电子锻造使用的 - 我猜）

但是，我.css的项目目录中有文件，如果我运行，DEBUG=* electron-forge start我看到它们只是被传递（未预处理）

我已经尝试添加react-css-modules到我的线路plugins并.compilerc创建一个新的.babelrc

.compilerc：

.babelrc

两者都在运行之后yarn add babel-plugin-react-css-modules -s，但是当我尝试运行时仍然出现编译错误 no compiler found ：

import "mystyles.css"

我第一次尝试使用 React 和 Webpack 的 CSS 模块，我遇到了至少三种实现它的方法：

1. CSS加载器
2. 反应 CSS 模块
3. babel-plugin-react-css-modules

babel-plugin-react-css-modules为了平衡代码的简单性和性能，我选择了它，除了一件事之外，一切似乎都运行良好：我的第 3 方库（Bootstrap 和 Font Awesome）也包含在 CSS 模块转换中。

上面将适当转换className的NavLink. 但是，span内部需要引用全局样式才能呈现图标。

上面的跨度没有分配一个className预期的转换，但是我捆绑的样式表没有这些 CSS 类，因为它们被转换成其他东西，以模拟本地范围。

以下是我.babelrc要激活的文件中的内容babel-plugin-react-css-modules：

在我的 Webpack 配置中，下面是css-loader为转换配置的部分：

据我所读，上述规则应排除库样式表，我还尝试专门为排除的样式表添加另一条规则，但这似乎不起作用，因为我猜这些样式表仍使用原始规则进行转换。

为了从这两个库中导入 CSS，我的父样式表中有以下两行声明了一些全局样式：

反应和所有这些东西都很新，所以我需要一些帮助。我最近在我的项目中添加了https://github.com/gajus/babel-plugin-react-css-modules插件。经过一些麻烦后，我让它工作了，所以我现在可以将我的本地 css 文件与我的组件一起使用。到目前为止，一切都很好。

不是我想为整个应用程序添加引导程序。在我添加 css-modules 插件之前它工作...

这是我的代码的相关部分（我猜......如果我错过了什么让我知道）：

index.js（我的应用程序的入口点）：

.babelrc：

webpack.config.js：

欢迎任何建议。感谢您的时间。

哦顺便说一句：我也想在我的应用程序中引入 scss，我还不知道该怎么做（还没有做过任何研究，但是如果你们中的某个人知道怎么做并且愿意解释，我真的很感激......不知道它是否有很大的变化）。

编辑：我完全忘记添加我的组件：

我正在使用babel-plugin-react-css-modules. 它将styleName属性添加到 HTML 元素。Typescript 无法识别此属性。我很确定我需要扩展一些东西，但我尝试过的任何东西都没有奏效。

我曾尝试Element在“.d.ts”文件中声明一个来进行声明合并，但我一定是做错了什么。

更新：

.d.ts 不工作

使用 css-modules 后，scss 中的 background-image 将不起作用。

请问，如何正确配置？

回购：https ://github.com/pdsuwwz/Antd-app

错误：

.babelrc：

scss:

网页包

postcss.config.js

我的大部分网站都在我的一些全局 UI 样式中使用 Bulma 类，我想继续在我的组件中使用这些类，但也能够为这些组件定义 CSS 模块，以便自定义每个组件的调整。

正因为如此，我添加babel-plugin-react-css-modules到我的项目中，它允许我使用我的 Bulma 类className并将我的模块类放入styleName. 好吧，有点hacky的感觉，但它的工作。我global-styles.scss在 CSS 目录中有一个文件，我正在将其加载到我的主应用程序组件中。这是我导入 Bulma 以及定义我自己的任何全局样式的地方。

我的问题是，当我的全局样式和模块样式都被粉碎在一起（通过 css-modules？）并注入头部的样式标签（通过 style-loader？）时，我的模块样式首先被定义，然后是我的全局样式。

我觉得模块样式是本地范围的，并且应该始终优先（最后加载），即使我在同一个组件中同时加载全局样式和范围样式。例如，在一个组件中，我使用了 Bulma 的.navbar类，但我也在我的.navbarCSS 模块中为该组件定义了我自己的类，并且我将这两个类应用于我的组件中的同一个元素。

无论如何我可以指定构建样式标签的顺序吗？在所有这些插件之间，我迷失了方向，然后当您将 Gatsby 的插件抽象放在上面时，一切都非常混乱。

我想把<label>这个 div 变成红色：

我关联的 SCSS 文件如下所示：

是否可以babel-plugin-react-css-modules使用 SCSS 的这种嵌套功能？