问题标签 [css-modules]

如何根据 GLOBAL 父选择器的存在（在本例中为 isOpen）使用 Sass 和 CSS 模块设置我的 React 组件的样式？

呈现的 HTML：

我的萨斯文件：

上面的代码给出了错误：属性“全局”必须后跟一个“：”

所以，我使用 CSS Modules webpack loader：

css?modules&importLoaders=1&localIdentName=[path]_[name]_[local]_[hash:base64:5]

我想将每个styleName属性不仅编译为通常生成的通用类名，而且还编译为另一个更简单的类。

例如：代码

<div styleName="CLASS-NAME" />

现在编译为

<div class="path_filename_CLASS-NAME_12345" />

我希望它编译成

<div class="_CLASS-NAME path_filename_CLASS-NAME_12345" />

我正在关注这篇关于静态站点生成器https://css-tricks.com/css-modules-part-3-react/的文章中的每一步。我从那篇文章中唯一改变的是 .babelrc 的设置。在预设上，我使用 es2015 而不是 es2016，它看起来像这样

.babelrc

在我收到以下错误

我做错了什么？

我正在尝试从 CSS 模块导入主题，但 TypeScript 给了我“找不到模块”错误，并且主题未在运行时应用。我认为我的 Webpack 配置有问题，但我不确定问题出在哪里。

我正在使用以下工具：

这是我的webpack.config.js

和我App.tsx要导入的地方：

启用类型安全样式表模块导入还需要什么？

我的应用程序和组件的名称间距有以下约定：

我想使用 CSS 模块，但是，我不确定如何转换它并保持应用程序和组件名称间距的相同特性。我知道我可以简单地省略整个#app-nameID，但我想要这种特异性。

想法？

我正在使用 React/Redux 和 CSS 模块开发一个 Web 应用程序。对于单元测试，我使用identity-obj-proxy来模拟我的 CSS 导入。

然而，QA 团队想知道在使用 Selenium 时如何处理混淆的类名（我自己完全不熟悉）。我能找到的唯一提到的两者是这个问题，但接受的答案对 QA 来说并不清楚。

在这种情况下使用 Selenium 的一些解决方案是什么（最好是一个易于理解的答案，我可以去 QA 团队）？

我正在开发一个使用 ReactJS 和 CSS 模块的项目，每个反应组件都有一个相应的 SASS 文件。

在编写 CSS 时，每个类都会附加“三重下划线随机字符串”，例如.myClass__e7G3A

我的应用程序根据滚动位置将类（顶部或向下）附加到正文标记，我希望我的组件对此做出响应。

我遇到的问题是，如果我在 CSS 模块中添加.top或添加.down，那么它也会将唯一标识符附加到该类的末尾。

例如

JSX：

呈现的 HTML：

SASS 文件：

编译的CSS：

所需的 CSS 结果：（并且.top没有.down唯一标识符）

我确定我只是缺少一个简单的标识符或可以实现此目的的东西。

希望你能帮忙。谢谢。

这是我webpack.config.js文件的相关部分：

当我编写自己的 css 并将其与我的React组件一起使用时，这非常有用。但是，我最近尝试使用React Datepicker，它带有自己的 css 文件，可以导入到使用 React Datepicker 的组件中。

如何修改我webpack.config.js的文件，以便我导入的 React Datepicker css 文件不会被具有本地类名的 CSS 模块转换？换句话说，是否可以配置 webpack 以便将 3rd 方样式导入全局范围，并将我自己的样式导入本地范围？

另外，如果我想编写自己的自定义样式来覆盖 React Datepicker 样式，我将如何做才能使这些样式也处于全局范围内？

我有一个_color.scss包含 400 种颜色作为变量的文件。我喜欢 20 个组件，它们的样式需要这种颜色变量。

我正在使用 SCSS + CSS 模块来构建我的样式。截至目前，我正在将其导入_color.scss每个组件的style.scss.

例子：

组件1.scss

组件2.scss

组件3.scss

以前，当我单独使用 SCSS 时，我将导入color.scss到 myindex.scss并导入它下面的所有其他样式。这样，变量将在所有组件中可用。

例子：

现在，下面的所有变量都将在和下_color.scss可用。component1.scsscomponent2.scsscomponent3.scss

有没有办法做类似的事情CSS Modules + SCSS？一个声明全局变量的地方？

我composes:在 ST3 中使用 CSS 模块选择器，但我不知道如何从分号中删除粉红色突出显示。任何帮助，将不胜感激。