问题标签 [react-css-modules]

官方文档太复杂了，对我不起作用。有谁知道如何设置css-moduleswebpack 的好文章？

react-css-modules也没有帮助

更新

这是我的模块配置。它是在试图达到我的目标时被编辑的，所以它与原来的不同。

我正在使用 CSS 模块附带的（现在较旧的）版本的 react-boilerplate。它们的优点是您可以创建变量并将它们导入其他 CSS 文件中。

这是我的 colors.css 文件

当我导入该文件时，我只需要在 .css 文件的顶部使用：

我希望为我的网站选择两个主题，并且我希望能够使用 Javascript 动态更新这些变量。最好的方法是什么？

编辑：我希望有一种方法可以更新colors.css文件，而不必在从两个可能的 css 文件中提取的所有组件中进行条件导入......让我知道是否有办法做到这一点，如果有的话我会更改接受的答案。感谢所有回答的人！

我正在使用 react-bootstrap 和 css 模块。在我的 webpack.config.js 中，我可以使用以下配置运行我的 bootstrap.css：

但是我的 css 模块应该有这个设置：

如何将它们结合起来以使其适用于 css 模块和 react-bootstrap

我有几个简单的 React 组件，每个组件都在各自的文件夹中使用自己的 React CSS 模块。CSS是基本的，但我有它的工作。我正在使用 Webpack 2 构建。

我的问题是如何将另一个 CSS 模块中的公共 CSS 片段共享到两个 React CSS 模块中？

我不确定我是否应该有一个只有公共 CSS 模块的文件夹，然后将它导入到两个 React 组件中。如果是这样，我如何引用/引用常见的 CSS。

我已经阅读了文档，但我仍然感到困惑。

有没有类似于 SASS 或 Less include/composition 的方法？

我知道这可能会破坏孤立组件的模式，但在我的简单案例中，我有一些 CSS 可以制作一个带有略微透明边框的按钮，并且所有反应组件都可以使用它会很好。我想我可以将这个 CSS 放置为一个常见的 .css 文件并让 Webpack 捆绑它，然后将它用作 className={....}

在使用 import 语句时，我对区分 sass-loader 和 css-loader 有点困惑。据我所知，css loader resolve import statment(@import) 和 style-loader 可以在你的页面上动态注入样式。我也在我的应用程序中使用 sass-loader。所以我对 sass-loader 功能感到困惑。它是否还解决了 import 语句以及将 sass 转换为 css 的问题。在这种情况下，如果我在项目中仅使用 sass 文件，则不需要 css-loader，因为该工作将由 sass-loader 完成。我在吗？任何人都可以强调这一点。任何帮助将非常感激

我有这个用于 CSS 加载的配置：

如上所示，它使用 CSS 模块。一切似乎都很好。

但是，除了我在代码中创建和使用的 CSS 规则之外，还有一些外部 CSS 随第三方库leafletjs 一起提供。

我想我想以某种方式导入它而不将其重组为 CSS 模块。

我该怎么做才能使这个外部样式表注入到我的 JS 捆绑输出文件中？

我正在尝试在我的反应项目中将 css 模块添加到 webpack。我是这样添加的

但我收到编译错误说

我已经在 webpack 中有一个手写笔加载器，它工作正常

我该如何解决这个错误？

我已经有一个 eot 文件的加载器

当我像这样（下）使用 css loader 时，错误不会出现。

我已经在 package.json 文件中安装了 css-loader 和 style-loader。

如何创建一个可以覆盖由 css 模块创建的动态样式的打印样式表？

使用 CSS 模块，类名以唯一的名称呈现，如下所示：

在我的打印样式表中，我有以下内容，但没有效果：

我可以通过添加到按钮样式来让它工作!important，但是我会有很多打印样式，我不想为每个样式属性都这样做。有替代方案吗？

如果这里碰巧有特定于 React 的方法，我也会使用 React。

我正在尝试在我的 reactjs 应用程序中使用 css 模块。我已经在webpack.config文件中添加了加载器。

但是当我在我的应用程序中导入一个 css 文件并尝试使用它时，classNames它{styles.example}不会链接到我的 css 文件中的 .example 。

这就是我的做法：

这是行不通的。

组件没有样式。我在控制台中没有收到任何错误。我该如何解决？

我有这种情况，在我的一个 Component JSX文件（例如List.jsx）中导入样式如下：

• 第一次导入，.rcss 是css我们使用react-css-modules规则的本地文件

• 第二次导入属于 FixedDataTable 组件（第三方）

• 第三次导入是使用标准规则的全局css文件css

这适用于react-css-modules但babel-plugin-react-css-modules会抛出错误，因为我们正在导入两个匿名导入。

有解决方法或解决方法吗？