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

我真的很喜欢 babel-plugin-react-css-modules 分别为全局和本地样式提供的 className 和 styleName 的分离，但是在让插件与 create-react-app 一起工作时遇到了一些麻烦。

我尝试通过运行安装插件

npm install babel-plugin-react-css-modules --save

...正如它在项目中所说的那样（github https://github.com/gajus/babel-plugin-react-css-modules#css-modules）...

...并且还按照类似线程 (#5113) 中的建议使用 craco 来帮助克服 create-react-app 的限制而无需弹出，但我仍然无法导入 scss 文件并使用 styleName 对其进行引用.

有谁知道我是否在这里遗漏了其他东西？抱歉，如果这是一个菜鸟问题，我是 React 新手，并且一直在寻找解决方案。

问题

最近我在一个 React 项目中从不推荐使用的 CSS Module 切换react-css-module到babel-plugin-react-css-modules使用 CSS Module 并遇到无法解析使用@import statements(with postcss-import) 导入的 CSS 文件中的样式声明的问题。我想知道这是一个已知问题还是这些插件的配置中缺少什么？

该场景是使用通过多个​​ CSS 文件以传递方式 -ed声明tabs.jsx的类：utilities.css@import

这将导致使用 webpack 在捆绑阶段出错：

调试

添加一些调试语句，getClassName.js显示来自的类声明@import永远不可用，因此抛出上面的错误。

设置

以下是依赖项：

中的设置postss.config.js：

中的设置webpack.config.js：

在.babelrc：

以前我用的react-css-module时候，从来都不是问题。所以也许它特定于较新的babel-plugin-react-css-modules或与的兼容性postcss-import？任何有关如何解决此问题或帮助的方向都将不胜感激。谢谢。

我们目前正在使用 webpack 和 babel 开发一个 react 项目，并希望在我们使用的 CSS 框架 Bootstrap 和 AdminLTE 2 中自动删除未使用的 CSS 类。

在项目中，我们使用webpack (v4.41.0)、babel (v7.6.2)和react (16.10.1)。要使用 CSS 类，我们使用 babel 插件babel-plugin-react-css-modules，它使用 css 模块。

什么是现代和当代的方式来做到这一点？

我目前正在开发一个反应项目，在某些情况下必须扩展 CSS 类的框架，如带有属性的引导程序。例如，我想更改此类的背景颜色（https://github.com/ColorlibHQ/AdminLTE/blob/v2.4.18/dist/css/AdminLTE.css#L99）。

如何使用babel-plugin-react-css-modules做到这一点？我只能使用我自己的 CSS 类或 AdminLTE 之一：

在项目中，我们使用 webpack (v4.41.0)、babel (v7.6.2) 和 react (16.10.1)。要使用 CSS 类，我们使用 babel 插件 babel-plugin-react-css-modules，它使用 css 模块。

什么是现代和当代的方式来做到这一点？

我在我的反应应用程序中使用 scss 模块，但每次我更改 a时，我都会在热重载期间styleName收到错误消息。Could not resolve styleName如果我没有任何相应的样式styleName，我也会收到错误消息。每次重新编译都必须重新启动服务器。我的配置有什么问题吗？

webpack.dev.js

例子.scss

我正在开发一个 vue 项目，并且我制作了 CSS，modules以便我可以为不同的元素分配不同的类名。

但是包含 CSS 模块的组件会多次渲染，例如：

按钮组组件像这样呈现按钮

它分配类名，如

但我希望在同一组件的每次渲染中使用不同的类名

我想用来babel-plugin-react-css-modules创建唯一的类名，所以我做了一个 PoC：我弹出了 create-ract-app，然后我添加babel-plugin-react-css-modules到 package.json 中的插件：

当我启动应用程序时，我看到 HTML 中的类设置正确，但在<style>标签内它是常规.App名称：

我错过了什么吗？我认为它应该很容易设置，并且我犯了一些我看不到的愚蠢错误。预先感谢您的每一个答案。

编辑：App.js 代码：

材料-ui：v4.8.2
反应：v16.12.0

带有 rtl 应用程序的 babel-plugin-react-css-modules - 我想使用 injectFirst 但后来我收到警告： Material-UI: you cannot use the jss and injectFirst props at the same time.

我的猜测是我应该以不同的方式定义 jss，以便它支持 rtl 和 css 模块。

对于 rtl 我应该这样做：

对于 css-modules 样式，我应该这样做：

谁能告诉我应该如何将两者结合起来？

我已经使用 CLI quickstart初始化了一个 React Native 应用程序。我唯一编辑的是我使用 CSS Modules 来设置组件的样式（注意：className 而不是 style）。我想用 flow 对项目进行类型检查，如果我运行 flow，它会给出以下错误。

我无法创建视图元素，因为className对象类型 [1] 中缺少属性但存在于道具 [2] 中。

我能做些什么？

我想在css本地覆盖组件的外部模块类

In my code

现在ExternalComponent渲染一个div带有 class 的元素parent。因此，如果我正在导入 ExternalComponent如何覆盖本地导入模块中的parent类，以便仅针对此组件更改样式，而我使用它的其他位置不会更改。ExternalComponentstyleExternalComponent

顺便说一句，我正在使用反应。