问题标签 [babel-plugin-react-css-modules]

我有一个通过babel-plugin-react-css-modules插件使用 CSS 模块的组件。

在组件生命周期的某些时候，我希望能够通过直接访问 DOM 来为其计算新维度。

在我的 SCSS 样式表中，我有一个名为的类.full-width，我想将其应用于组件的 DOM 元素，以便进行计算，然后再次将其删除。

现在，由于添加类并在几分之一秒后删除它不会影响组件或其状态，我想通过直接访问 DOM 来添加和删除类，而不是通过某种方式将其与组件相关联state.

如果我这样做this.DOMReference.classList.add('full-width');，则将类full-width添加到其中，但我想添加该类的模块化版本，因为如果我这样做了styleName="full-width"（例如Component__full-width___Pjd10）

有没有办法在不进行.full-width全局声明的情况下做到这一点？

我能做到这一点react-css-modules吗？

我正在尝试为 webpack 3.5.1 设置babel-plugin-react-css-modules（从 create-react-app 中弹出）。

这是我的 webpack.config.dev.js：

根据演示，我将以下代码添加到我的 webpack 中，但我的 css 不影响组件（我已从 更改className为styleName）。设置它的正确方法是什么（同时允许热重新加载）？

如何将 CSS 模块类名作为不同于 的道具传递styleName？

我尝试使用@import不工作。</p>

错误：

这是测试演示：git@github.com:ganxunzou/react-redux-boilerplate.git

测试设置：

• clone git@github.com:ganxunzou/react-redux-boilerplate.git
• git checkout css-module-less-postcss
• npm i
• npm run dev

问题

我试图在我的 React 项目中使用babel-plugin-react-css-modules以获得更好的性能，而不是React CSS Modules。

但是，样式未正确应用。

原因

标签中的版本<style>用奇怪的连字符包裹，例如：

• 在<style>标签中：-components-Foo-___Foo__foo___1fcIZ-
• 关于 DOM 元素类名：components-Foo-___Foo__foo___1fcIZ

即使我们使用相同localIdentName的，生成的结果也与 css 中的选择器和 DOM 元素上的 className 不同。

（注意：在 babel-plugin-react-css-modules 中，localIdentName是 [path]___[name]__[local]___[hash:base64:5]硬编码的 options.generateScopedName）

知道为什么会有 hypen-wrapper 吗？

自从将 babel-plugin-react-css-modules 从 2.8.0 升级到 3.3.2 以来，我已经开始收到错误：

babel-plugin-react-css-modules 配置为使用 babel-loader，webpack 配置：

module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules\/(?!(pretty-bytes|babel-plugin-react-css-modules))/, use: [{loader: 'babel-loader'}], },

我是否需要调整其他内容才能使用新版本？

当我遇到这个时我该怎么办？

如果 myClass 是唯一的类，我将导入相关的样式表并执行以下操作：

这种语法不起作用（不足为奇），我不知道该怎么做：

我应该把它归结为一个没有标签选择器的类吗？

有关问题的完整描述，请参阅https://github.com/gajus/babel-plugin-react-css-modules/issues/162。

Git repo = https://github.com/basher/react-no-webpack

这是一个简单的 POC / 脚手架，用于没有 Webpack 或 Gulp的 React UI 库，但它必须支持CSS Modules + Sass。

• 我只是想使用 Babel + Browserify。
• 并直接从“package.json”执行 NPM 脚本。

我有一个导入 CSS 文件的示例小部件组件，另一个导入 Sass 文件。解析 CSS + Sass 文件的内容时会发生错误 - 例如，转译器不理解“。” 在类选择器中。

这是具体的错误：

编辑/更新：

我做了更多调查，并在react-css-modules repo 中提出了一个问题= https://github.com/gajus/react-css-modules/issues/268

我正在使用 babel-plugin-react-css-modules，它似乎正在创建 className/styleName，但由于某种原因，它没有输出 CSS，以便模块可以读取它。

这是我的应用程序：启动板

我正在使用 webpack 4.2.0/React 16 并在从单独的配置文件导入的 webpack.config 中使用 babel 配置，因为您无法在 .babelrc 中设置上下文。

这是 babel 配置：

这是我的 webpack：

如果你运行npm start或者yarn start代码会编译运行，你可以看到一个基本的应用布局。如果您检查反应代码，您将看到样式名称反映在组件中。没有发生的是样式没有被输出。我似乎无法弄清楚为什么。

任何帮助表示赞赏。

对于大多数人来说可能是一个明显的问题，我很抱歉，但我迷路了。我用 create-react-app 创建了一个反应项目。我想添加一个使用 .css 样式的第三方库（Ant Design UI Framework）。Ant 将使用全局 .css，然后我的应用程序的其余部分可以使用 styleName。

运行后npm install babel-plugin-react-css-modules --save我必须做什么才能让它运行？文档引用了配置，但正确配置应用程序所需的各个步骤根本不清楚——至少对我来说是这样。

有人可以提供一些“白痴指南”来设置它，并详细说明一些步骤吗？

谢谢，

克里斯