问题标签 [css-modules]

我无法弄清楚如何设置我的 webpack 以便能够在我的组件中使用 scss 模块，例如：

import styles from './ComponentStyles.scss'

到目前为止，我尝试将 webpack 配置为sass-loader一起使用，postcss-loader但没有运气：

注意isomorphic-style-loader是我使用的库，而不是style-loader由于服务器渲染要求，在其 github 页面文档中，他们实际上使用带有 .scss 扩展名的 postcss-loader，但在我的情况下，如果我遵循他们的示例，则不会编译 scss。

我正在尝试编写一个将派生文件添加到 webpack 文件系统缓存的加载程序。

概括地说，我有一个 CSS 加载器，它应该为 CSS 类生成 TypeScript 类型定义文件。这个加载器位于加载器顺序的中间，因为我正在为 CSS 模块生成这些文件。

我可以使用 编写这些文件fs，但是 TypeScript 加载器在下次运行 webpack 之前看不到这些文件。这使得 TS 第一次抛出错误。

如何让加载器修改 webpack 的文件系统缓存？

目前正在从事一个使用 React 和 CSS 模块的大型项目。我想在一堆列表项上实现“react-anything-sortable”。

到目前为止，实现已经停滞不前，因为“react-anything-sortable”将以下类添加到“react-anything-component”内的任何子项中：.ui-sortable、.ui-sortable-item、.ui-draggable和 .ui-sortable-placeholder。我假设这些是为“react-anything-sortable”传递的类，以识别正在拖动、放置等的 DOM 元素。

我通过引用 .scss 文件来导入我的 List 组件的样式，如下所示：

要在组件上使用样式，您需要添加 styles.CLASS 以使用类：

因此，'react-anything-sortable' 放置的 .ui-sortable 无法引用样式表是可以理解的，因为它不添加 .styles。

可以很容易地看到其他 div 元素如何具有“散列”类名（表明已在其各自的 css 模块中找到该类），但是，具有 ui-sortable 的 div 仅具有该类，但无法访问 .scss 文件包含 .ui-sortable 的样式属性

我该如何解决？

编辑：这是我实施它的方式

小部件列表.js：

小部件列表.scss

我正在使用 webpack 和 sass 编写一个 React 应用程序。现在我想尝试那些CSS 模块，但我遇到了一些麻烦。首先，据我了解，我不能使用 .scss 模块，这就是为什么我的想法是将 .scss 文件转换为 .css 文件（例如 link.scss -> link.css、main.scss -> main.css、等），然后将它们连接到 React 组件。但我不能让 webpack 将我的 .scss 文件拆分为单独的 .css 文件。我尝试了不同的配置，但我总是得到 main.css，它连接了所有 .scss 文件。我想这对我来说不是最好的方法。

那么，您能否帮我获得一个正确的配置，将所有 .scss 文件拆分为 .css。或者也许还有另一种方法可以在我的应用程序中使用 .scss 模块。提前致谢。

这是我的 webpack 配置

这是我在控制台中的输出：

在我的应用程序中，我有多种主题样式（您可以将它们视为不同的、单独的 CSS 样式文件）。我想开始使用 CSS 模块，但我什至不知道如何处理import我的第一个文件。

让我们假设以下（简单）目录结构：

根据用户设置，我想选择不同的 CSS。这在浏览器（或服务器）中很容易做到。但是如何将 myComponent.css 包含到 myComponent.js 中？

根据 CSS 模块，我应该import使用我正在使用的文件。所以import styles from 'theme/myComponent.css。问题是我没有一个真正的主题，而是 3 个不同的平行主题。

使用 CSS 模块时甚至可以使用多个布局/主题吗？

I'm using the following code to dynamically set a className in a React component based upon a boolean from props:

<div className={this.props.menuOpen ? 'inactive' : 'active'}> ... </div>

However, I'm also using CSS Modules, so now I need to set the className to:

import styles from './styles.css';

<div className={styles.sideMenu}> ... </div>

I'm having trouble with this - I tried using classnames to gain more control with multiple classes, but because I need the end result to be that the className is set to both styles.sideMenu AND styles.active (in order for CSS Modules to kick in) I'm unsure how to handle this.

Any guidance greatly appreciated.

有没有办法在 webpack 构建中编译 css 模块但根本不编译 javascript？我想发布一个使用 css 模块的反应组件，但指向我的源文件作为入口点（未转译的 javascript）。但是，如果我不编译 css-modules，那么使用该组件的人将无法使用它，除非他们也使用 css-modules 加载器。在 webpack 中是否有可能发生这样的事情，或者是否存在一些这样做的库？

我试图让 CSS 模块在不使用内联模板的情况下与 Angular 2 一起工作。官方样式指南还建议当您有超过 3 行标记时不要使用内联模板。所以我的想法是使用 and 的组合，lodash-templates但file-loader我不确定. 这就是我希望我的组件看起来像的样子：lodash-template-loaderfile-loader

我知道这不会起作用lodash-template-loader，因为例如ejs-loader的输出是一个函数，必须使用将用于编译模板的数据来调用它。我想styles在我的模板中使用，然后喜欢：

所以基本上我想编译这个 usingh ejs-loader，然后将它传送到 ，file-loader以便我得到单独的 html 文件。我不知道如何实现这一目标。我的意思是上面只是一个想法，但我不知道如何编译模板，然后将其通过管道输入，file-loader因为这仅适用于require语句。有任何想法吗？

根据ejs-loader我必须执行以下操作来编译模板的文档：

我想该template函数然后将模板作为字符串返回。但是我怎么知道从中创建一个单独的 html 呢？我还需要file-loader吗？

编辑

因此，一个解决方案可能是实现一个接受文件和样式对象的自定义加载器。然后加载器返回一个可以传递给file-loader. 这里的问题是，如何将样式对象传递给加载器？以及如何将模板字符串转换为filer-loader可以读取的格式？

在我们的自动化测试中，我们代码中的典型行可能类似于：

find('.edit-icon').click

我们正在我们的项目中使用 css-modules，我被警告过类名可能会发生巨大变化。一个非常滑稽的例子是这个网站在它的类名中使用了表情符号（当你检查页面时）：

Glenn Maddern 的 CSS 模块

我如何才能最好地为如此剧烈的变化做好准备？我想象我们的许多规范都被打破了，但我有点担心在我们的项目中根本无法使用这项新技术编写测试。

我正在使用 c3.js，我的组件正在使用 CSS 模块。我想用图像修改折线图中点的填充。为此，我在渲染方法中添加了 defs-pattern -

在我添加的样式 css 文件中 -

但什么也没有发生。我只想在折线图的点内显示一个图像。

非常感谢任何帮助。