问题标签 [css-modules]

我正忙着用 CSS-Modules 学习 React，但我不太明白如何存储变量？例如，在 Sass 中，您可以这样做：

你如何在 CSS 模块中实现这一点？

我正在尝试在我的 React 项目中使用 CSS 模块。问题的第一部分是，如果我编写嵌套的 css 类（使用 sass），我不知道我是否可以访问内部的类，因为这些似乎也被编译成唯一的类名。一些代码：

我有一个包装类，它有时是“菜单可见”的，它会改变所有孩子的属性，在 React 中这样做是不好的做法吗？

如果菜单可见，.header 中有多个类会更改，因此只更改包装类会很方便，我可以以某种方式引用子项吗？这样保持嵌套在scss中？

编辑

我能想到的一种解决方案是将 className="menu" 替换为 className={styles.header.menu} ，但这似乎不起作用。问题是如果它的父级具有菜单可见类，我希望 .menu 更改其属性。

现在我正在将我当前的项目从Webpack 1to移动Webpack 2，我遇到了一些以前运行良好的 css 模块问题。特别是，我使用css-loaderand react-css-modules。我目前的开发配置如下：

它工作正常。对于生产，我使用ExtractTextPlugin（版本 2.0.0-beta.4），我的 Webpack 配置是这样的：

在这种情况下，构建失败并出现以下错误：

所以它似乎没有预先添加本地前缀。文档中也提到了css-loader：

注意：对于使用 extract-text-webpack-plugin 进行预渲染，您应该在预渲染包中使用 css-loader/locals 而不是 style-loader!css-loader。它不嵌入 CSS，只导出标识符映射。

所以我尝试了 loader: 'css-loader/locals' 并将其添加到选项中，但不幸的是，没有任何效果。

我也尝试用 postcsspostcss-modules插件解决这个问题。它修复了构建，但是当我尝试启动我的应用程序时，它看起来没有适当的 css 名称映射导入。

我正在做 react 并有一个使用 CSS 模块进行样式设置的元素，如下所示：

因为类名是散列的，所以编译后的输出类似于：

我在一个按钮上添加了一个事件侦听器，当按下该按钮时，会将“title”类添加到此元素，以便为该特定类提供额外的样式，如下所示：

有没有办法我可以：

1. 将一个类附加到一个元素，并且在我的 css 文件中没有对该类进行散列或
2. 将类添加到与最终编译的哈希名称完全匹配的元素？

谢谢。

反应：

厄运节点：

CSS样式：

webpack.config：

我想将 css 模块添加到我的 React 项目中，就像 instagram with react-css-modules.

但是发现2个问题：

1：我可以部分使用css-module吗？所有的子节点HomePageContainer-home-page-wrap-Ql_jW都失去了css样式，同理home-page-wrap-normal。

看来我应该在整个项目中将className替换为sytleName。有什么方法可以选择使用 styleName 和 className 并显示正确的 css 样式。

2：我可以在开发模式中开源地图吗？base64 的类不可读，我需要一个 sourceMap 将原始类名与编译后的类名连接起来。

我希望能够在我的应用程序“src”的根目录中有一个文件夹，其中包含可重用的 css，我可以在 css 模块中编写它

在我的 css 中，我的班级没有，composes: table from './../../../css-vars/index.css';但我试图能够使用composes: table from 'css-vars/index.css';并让它解析到我的项目的根目录。目前，当我尝试这个时，我得到了这个错误：

这是我的 css 加载器的样子：

任何想法？

我通过在我的源代码中添加路径解决了 postcss smart-import 的类似问题。css-loader 是否有类似的解决方案？我注意到有一个根查询参数，但添加并没有帮助

如何使用 Webpack 在 Typescript 中导入 CSS 模块？

1. .d.ts为 CSS生成（或自动生成）文件？并使用经典的 Typescriptimport语句？与./styles.css.d.ts：

   /li>

2. 使用requireWebpack 功能导入？

   /li>

但是对于最后一种方法，我必须定义require函数。

什么是最好的方法或最佳选择，并且还可以为 CSS 文件定义和类处理 IntelliSense？

我有一个使用带有 css-modules 的 scss 的文件，如下所示：

import styles from './Login.scss';

webpack 构建工作正常，但我收到一个流程错误：Required Module Not Found

在我的 .flowconfig 我有

我也看过https://github.com/facebook/flow/issues/338但它并没有真正的解决方案。

有没有人找到解决这个问题的方法？

我正在尝试在我的 React 项目中使用 css 模块。我能够执行以下操作：

我的样式是从 CSS 中提取并成功添加前缀的。但是，当我尝试使用 CSS 模块的“组合”功能时，它似乎被完全忽略了。我什至没有从其他文件导入 - 只是试图编写本地类。但是，当我克隆演示项目（https://github.com/gajus/babel-plugin-react-css-modules/tree/master/demo）并在 CSS 中添加“composes”时，它可以工作。我看不出我的代码和演示中的代码有什么区别......

我的 webpack 加载器是：

这是我的 .babelrc：

我开始使用 React 和 Redux 制作新项目。我是 React 新手，不确定应该使用哪种样式方法。显然，我想使用不会降低性能、提供 CSS3 的所有功能并且可维护的那个。所以选择是：

1. 使用Radium的内联样式
2. SASS
3. CSS 模块

我有长期使用 SASS 和 CSS3 的经验。尽管如此，内联样式确实给我留下了深刻的印象，但它不提供自动前缀和其他一些不错的自动化功能。显然没有终极选择，但最有效的选择是什么？