问题标签 [react-css-modules]

我正在转向要求类布局为的 react-css-modules：

而不是传统的：

如何在 IntelliJ 中自定义 emmet，以便我在扩展时

它会返回这个吗？：

问题

我试图在我的 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 吗？

我想将 React CSS 模块与 Bootstrap 一起使用。

首先，我使用create-react-app命令创建了一个项目。然后，我使用 NPM 安装了 Bootstrap 4，并将其包含在我的 app.js 中，例如：

我也确实npm eject可以访问我的 Webpack 配置文件。

同时我想在我的 layout.js 文件中使用 CSS 模块，所以我去了 webpack.config.dev.js 并将模块更改为 true：

当我将模块更改为trueBootstrap 时，CSS 显示不正确。如果我将模块更改为，false则 Bootstrap 正在工作。任何想法？

模块：真

模块：假

我在我的 React 应用程序的 webpack.config 中启用了 CSS 模块，这样我就可以将 CSS 文件本地限定为单个组件。我也在尝试使用 PrimeReact 中的 TabView组件。当我这样做时，PrimeReact 的主题不会被应用。如果我创建一个单独的项目并且不启用 CSS 模块，则主题将正确应用。

如何使用 PrimeReact 主题并启用 CSS 模块？

我已经测试将位于 Tabs.js 中的内容直接移动到 App.js 并获得相同的结果。

启用 CSS 模块

Webpack.config

应用程序.js

标签.js

默认 React 全局 CSS 作用域

启用 CSS 模块（本地组件范围）

我正在努力正确设置我的 webpack 配置......我尝试了很多事情但没有结果。当我尝试编译捆绑包时，我收到大量关于 .svg 文件路径的错误，但是路径没问题。

有谁知道如何修理它？请在下面找到我的 webpack 配置的代码

我正在查看许多教程如何正确设置 webpack 以使用 SASS + CSS 模块 + Webpack（我没有使用 Create React App 包）

就像在不同的路径中寻找 svg

和路径

是否可以一起使用 scss 和 css 模块。我有一个反应项目，我的 css 文件遵循 scss。我想在这个项目上使用 css 模块。是否可以在这些 scss 样式上使用 css 模块？

例如，我有这样的 css 文件（嵌套的 scss 样式）

现在如何将它与 css 模块一起使用？我的意思是我可以使用 className = {style.navbar-side} 为我的一个 div 赋予样式吗？

我正在使用 ReactJs 构建一个具有 3 条路线的简单应用程序：

要正确查看这些页面，我需要导入 CSS 文件。但是，如果我为“/login”路由导入 CSS 文件，它也会被加载到“/”路由中。

这是我的文件：

应用程序.js

index.js

和 login.js

例如：在我的 login.css 中想要我的身体的背景图片。但是这个背景也适用于“/”。我怎样才能防止css在全球范围内使用？对不起，我的英语不好 ：）

我使用 CSS 模块，我的 css/样式表文件位于组件旁边。

支持可以导入到我的样式表中的全局颜色文件的最快方法是什么？

我的 css-modules 和 webpack 默认支持这个吗？帮助。

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

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

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

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

我正在尝试在 React 中创建一个无状态组件，其唯一目的是充当可重用的包装器。我也在使用 CSS 模块，因为我想要完全模块化的 CSS。

问题是我不想添加不必要<div>的元素（甚至更多），而是我想使用 React 的片段。

现在，我遇到的问题是片段（至少现在）不接受类名。所以如果我试试这个：

// 在 Wrapper.js 中：

在（例如）Navbar.js 中：

现在我当然可以使用 div 而不是 Fragment，但是有没有其他解决方法可以避免使用不必要的标记，我在晚上的这个时间完全不知道这些？:)

提前感谢您提供任何见解、建议、更正或任何其他形式的帮助！