问题标签 [react-css-modules]

react-select尝试捆绑我css的jsx.

react-select如果我将它的文件dist/react-select.css包含在我的index.html：

但是，我不希望必须分发该额外文件的开销。

这是我当前尝试将其捆绑css在我的内部的基本概述jsx（我也尝试了其他一些方法）。在theme.jsx：

在form.jsx：

这种方法似乎适用于其他组件（尽管我不必使用classnames/bind）。

我承认我不会react经常使用 - 我学到的东西足以让它发挥作用，所以我不是那么精通，对正在发生的事情只有一个模糊的概念css。无论如何，我检查了我package.json的，一路上，我似乎发现需要安装以下css相关dependencies：

并且devdependencies：

非常感谢任何帮助！

不知道我在这里做错了什么，在哪里我 console.log(style) 它只是一个空白对象，但已定义。没有错误。

Login.js - 组件

Login.css - 这里没什么特别的

和 webpack.config.js 很可能是罪魁祸首，但我似乎无法找出问题所在

该应用程序编译并运行良好，只是 react-css-module 没有对样式进行命名空间，并且样式没有应用于元素。

我正在使用 create-react-app 的 aplha 版本https://github.com/facebook/create-react-app/issues/3815

我已将 css 文件更改为 scss 并将它们重命名为 [filename].module.scss，因此它使用 css 模块。

在我的 index.module.scss 中，我包含了全局样式，然后将其导入 index.js

-index.module.scss

-index.js

在 site.scss 里面我有以下

现在在 bootstrap-grid 中，我有想要在我的组件中使用的 mixin。

所以在 app.module.scss 我有

然后在 app.js 上导入

我在 app.modules.scss 中遇到错误

@include make-col-ready(); ^ 没有名为 make-col-ready 的 mixin

如何全局导入 mixins 和变量？

我正在使用 babel-plugin-react-css-modules。这是我对 webpack 的配置。

当我添加这样的东西时，在我的组件内部

在我的css文件中我添加了这个

一切都与样式有关，但是如果我检查元素，这就是我所看到的

它是生成的 css 模块名称。我可以在检查元素时以某种方式映射它并显示原始类名“feature-one”吗？

我怎样才能实现这种背景透明度

我尝试过使用线性渐变，但无法实现透明度。即使我将渐变从透明到某种纯色，我也会在应该透明的地方得到纯白色背景

}

});

我有一个反应组件，它有 X 选项用于导入使用 CSS 模块的样式表。

理想情况下，我希望通过使用例如获取一个全局环境变量

进程.env.主题

我不能使用：

我可以用：

然而.....

import/no-dynamic-requireeslint 规则一开始就说它不好。 https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-dynamic-require.md

我读过的所有文章和帖子都说这是不可能的。当然，这是一个普遍的愿望，但我一生都无法弄清楚如何去做。有任何想法吗？

更新：

如何让 react-css-modules 与Antd等外部​​ UI 库一起使用。我的 webpack 设置为编译 scss，UI 库中的样式是用 css 编写的。有没有办法让 react-css-modules 获取 UI 库的样式。

我尝试在我的项目的索引样式表中添加一个@import，但由于某种原因，webpack 无法识别@import。

我正在使用 ReactJS 和 typescript 创建概念验证项目的初始设置，并且我想在其中包含 CSS 模块，而不必弹出 webpack 配置。

以下是我到目前为止所遵循的步骤：

• npm install -g create-react-app
• create-react-app firstapp --scripts-version=react-scripts-ts
• npm install react-app-rewired --save-dev
• npm install --save-dev codebandits/react-app-rewire-css-modules sass-loader node-sass
• package.json: "start": "react-app-rewired start --scripts-version react-scripts-ts"

• 配置覆盖.js：

  const rewireCssModules = require('react-app-rewire-css-modules'); module.exports = function override(config, env){ config = rewireCssModules(config, env);
  返回配置；}

我正确设置了我的 App.module.scss 文件，并在我的 App.tsx 文件中引用了它：

从 './App.module.scss' 导入样式；

当我运行项目时，我有一个关于 css 模块的错误：找不到模块'./App.module.scss'。

当我在没有打字稿配置的情况下执行完全相同的项目时，它可以工作。

为了考虑 CSS 模块，我应该改变什么？

我遇到了 typings-for-css-modules-loader，但我不确定如何将它集成到我的配置中，因为我没有弹出 webpack 配置。

提前致谢，

托马斯.T

编辑 1： 我添加了一个 global.d.ts 文件：

• 声明模块'*.css'

• 声明模块'*.scss'

它成功了。最后我没有使用 typings-for-css-modules-loader 。

答案来自这篇文章：https ://hackernoon.com/zero-config-react-typescript-css-modules-jest-with-poi-bbcedfe2383a

新反应：

我有一个<Header />组件，我只想在用户访问特定页面时隐藏它。

到目前为止，我设计我的应用程序的方式是导航时不会重新渲染<Header />组件，只有页面内容是，因此它提供了非常流畅的体验。

我尝试为每条路线重新渲染标题，这样可以轻松隐藏，但每次导航时都会遇到丑陋的重新渲染故障。

所以基本上，有没有办法只在进出特定路线时重新渲染组件？

如果没有，实现这一目标的最佳实践是什么？

应用程序.js：

主.js：

我已经为 css 正确设置了 webpack，但仍然出现错误。请问可能是什么原因？

这是我的 webpack.config.js

/******/ /******/ /******/ /******/ /******/ /******/ /* *****/ /******/ /******/ /******/ /******/ /******/ /*** ***/ /******/ /******/ /******/ /******/ /******/