7

我正在使用 css 模块，但是我在组件中使用的一个库以使用 JavaScript 附加推文，以以下结构将一些元素添加到我的组件中：

<div class='user'></div>
<div class='tweet'></div>

我现在想在我的 css 模块中为组件设置这些元素的样式，如下所示：

我的组件.css

.user {
 /* styles */
}

.tweet {
 /* styles */
}

但是，当然，由于 webpack 加载器中的哈希命名，现在我的.user类发生了变化。.MyComponent__user___HZWfM

如何在我的 css 模块中设置全局样式？

4

2 回答 2

17

根据css modules docs，:global切换到当前选择器的全局范围。例如 :global(.example-classname)

所以这应该工作：

:global(.tweet) {
    text-align: left;
}
:global(.user) {
    text-align: left;
}

或者定义一个全局块

:global {
    .tweet {
        text-align: left;
    }
    .user {
        text-align: left;
    }   
}
于 2015-12-15T01:30:50.590 回答
0

许多人为此苦苦挣扎，似乎没有任何人同意解决方案。我已经解决的一个问题涉及对您的捆绑器进行一些调整，并专门解决了按原样导入库的需要，而无需手动包装或编辑它们。

在我的 webpack 配置中，我将其设置为扫描所有以 css 结尾的文件，除了“node_modules”和“src/static”文件夹中的文件。我从这里导入我的库，它们不会遭受类名转换，因此我可以自由地将常规类名用于全局 css，并像往常一样为模块化 css 使用 className={styles.element} 约定（它将编译为 .component_element__1a2b3 或类似的东西）。

这是使用此解决方案的工作生产 webpack 配置的示例：http: //pastebin.com/w56FeDQA

于 2016-11-20T21:37:15.390 回答