问题标签 [css-modules]

我有一个 React 项目，它使用 CSS 模块（用于组件）+ React-Bootstrap 和 CDN 托管的 CSS。

我有一个要求，当我的应用程序加载（每个用户）时，我调用一个端点以获得动态样式指南。为简单起见，它会是这样的：

{ "color_background": "#edeae3", "color_error": "#9e2d2d", "color_highlight": "#69b5ce", "color_success": "#498e49", }

然后应用程序应该以这些颜色呈现。我知道有自定义静态引导样式的能力（例如http://getbootstrap.com/customize/），但我不知道如何动态地做到这一点。

任何指导将不胜感激。

我正在将一个旧的 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 类的方法吗？

我有一些styles.istyl使用 css-modules 和 stylus 与 webpack 组合编译的文件。没有文件，TypeScript 无法识别它d.ts，并发出file is not a module错误。

同时，我正在.d.ts为每个这样的文件创建一个文件，如下所示：

消除错误，但这很乏味（我们有几十个这样的文件）。

*.istyl如果文件匹配（或任何其他任意模式），是否可以告诉 TypeScript 禁用检查文件是否为模块？

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

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

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

我试过用

这很好用，angular 使用属性选择器扩展每个类并赋予每个 DOM 元素唯一的属性。但是当会有很多 CSS 模块（例如 20 个组件和每个组件大约 100 行 CSS 代码）时，应用程序会快速加载吗？

我有以下 webpack 配置：

和postcss.config.js：

我想在本地 css 模块中使用 postcss-extend 插件，以便我可以在本地模块中扩展一些全局定义的选择器，例如：

where.test是本地的，.some-class是全球的。在当前设置下，只能扩展本地定义的选择器，而全局变量似乎未定义：

':global(.some-class)'，没有定义，所以不能扩展

加载程序的顺序似乎是问题，我认为postcss-extend插件处理时模块没有解决。我之前尝试过使用postcss-modules插件，postcss-extend但没有按预期工作。

有没有人想出如何将两者结合起来，以便可以在本地扩展全局定义的选择器？

我有从服务器加载的样式，并且我有一些元素想将这些加载的样式应用到一个类中。在示例 1 中，这是因为我需要使用 css 选择器。在示例 2 中，这是因为我正在使用的第 3 方组件通过类获取其活动样式。

注意：我正在使用 ReactJS 和 CSS 模块。

如何动态创建 CSS 模块类并将其应用于组件？

示例 1

示例 2

我有以下 .scss 文件

现在我将它导入到我的反应组件中

定义组件时，如何在 div 元素中引用 div.topMenuInde​​x.LoginStatus

你好吉姆

我正在使用 React Router 和 Webpack 2 对我的 JavaScript 文件进行代码拆分，如下所示：

此捆绑包的结果：

这意味着最终用户只能根据他/她所在的路线获得他/她需要的 JavaScript。

问题是：对于 CSS 部分，我没有找到任何资源来做同样的事情，即根据用户的需要拆分 CSS。

有没有办法用 Webpack 2 和 React Router 做到这一点？