问题标签 [react-css-modules]

我正在将一个旧的 Angular 应用程序迁移到 React，所以已经有旧的构建过程使用 gulp 生成一个 CSS 文件。对于 React 组件，我使用 CSS 模块，而 Webpack 正在生成另一个 CSS 文件。最后使用 gulp 我连接了 2 个 css 文件。

问题是 Webpack 生成的样式（react-styles.css）也出现在我的旧 sass 文件（eglanguages.sass）的源图上（尽管单击它们时没有正确的 css）

这是我的反应样式的 webpack 配置。

我认为如果我使用 Webpack 生成所有内容将解决我的问题。这是一种包含我的旧 sass 文件而不将它们转换为 css-module-generate 类的方法吗？

所以我正在构建一个反应应用程序并有一个快速的问题。如果我有两个单独的组件：分别使用 CSS 类 navigation.css 和 navigationLogo.css。在 navigation.css 我有一个名为 .main 的类，在 navigationLogo.css 我想要一个像这样的类：

但是使用 CSS 模块我无法做到这一点，有什么想法可以解决吗？

我有2个相同的组件，样式有点不同，所以我想重用常用样式，但不想为它们使用全局CSS，我该如何实现呢？

我正在为一个将使用 reactJs 的大型项目进行一些研究，并且所有 html 元素都将转换为 React 组件。

众所周知，css 在全局变量方面存在很大问题，因此存在很多 css 冲突的可能性。

有很多不同的选择，包括：

• 原子设计

• SMACSS

• OOCSS

或使用以下库：

• 镭

• 反应风格

• 反应内联

• jsxstyle

• 反应 JSS

• 反应内联 CSS

• 反应外观

• React 静态样式

所有这些都有一些好处，但同时都在实验中并且缺少一些东西。

换句话说，它们都没有解决 react 组件样式中的所有 css 问题，或者有些只是试图解决不存在的问题。

在尝试了所有这些之后，我有一半的想法是我应该只链接到常见样式的 css 文件，并拥有一个特定于每个组件的 css 文件，并从组件内定位该 css 文件。

这里有没有人有过在大型项目中设计 React 组件的经验，并且有任何反馈或建议？

我根本无法决定只使用直接的 css 或 javascript。

有什么我错过的研究吗？

我已经非常了解 CSS 模块的概念，以至于我确信我不想为未来做任何其他事情。

目前我正在尝试重构一个现有的应用程序以使用 CSS 模块，该应用程序从那时起就使用了带有 BEM 方法的经典 sass。

在我描述我的问题之前，我想明确表示我不明白我正在解决一个实际上不在 CSS 模块领域内的问题。应仅将样式应用于单个模块内。顶多应该与其他模块的其他 CSS 类组成 CSS 类。但基本上：您构建一个（HTML-）模块，然后使用 CSS 模块来设置该模块的样式，仅此而已。

问题是：在重构过程中，有一个问题源于拥有基于 SASS 的样式系统。当这个类应该与另一个模块中的另一个类结合使用时，我找不到在 CSS 模块环境中使用 CSS 类的有效方法。

SASS 中的示例：

[页面.scss]

[标题.scss]

如您所见：一个模块（页面）定义了一个 CSS 类“包装器”，另一个模块定义了一个 CSS 类“标题”。此外，当放置在类“包装器”中时，类“标题”的行为应该有所不同。

同样，我知道这并不是 CSS 模块的真正领域。但我真的很想知道这是否可以通过 CSS 模块实现？CSS 模块的“组合”功能并不适合这里......

我在 webpack 中设置了一些别名，如下所示：

@imports他们在文件顶部的 sass 文件中工作正常：

但是，当使用“composes”加载时，它说找不到模块：

但是，如果使用“正常”路径 ( ../../components/common/css/button) 它可以工作。

这是预期的行为吗？我该如何解决这个问题？

提前致谢。

使用 iframe 定义组件时（例如，通过https://github.com/ryanseddon/react-frame-component） - 在使用 react-css-modules 时如何将全局样式集成到 iframe 本身？

我正在使用 CSS 模块和react-css-modules. 我有一.app-link堂课。

在我的 CSS 文件中

现在我希望能够定位.app-link.active我该怎么做？

我尝试在 typescript 中使用 react-css-modules，但我收到一条错误消息，无法将 styleName 添加到 div 元素。这是代码。

我收到此错误消息：'Property 'styleName' does not exist on type 'HTMLProps<HTMLDivElement>'

和 tsconfig

我正在尝试使用babel-plugin-react-css-modules弹出的副本create-react-app来确定我的 LESS CSS 的范围。

我已经成功地安装和配置了插件，它使用该styleName属性正确设置了作用域类名，并且我已经将它配置为与 LESS 以及文档一起使用。

但是，在导入生成的 CSS 时，它不会转换类名以匹配元素上设置的类名。这是我webpack.config.dev.js和App.js文件的相关部分。

还有我的 App.js 文件

从我的 package.json

关于我做错了什么的任何想法？谢谢你的帮助！