使用css模块如何定义全局类

Question

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

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

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

MyComponent.css

.user {
 /* styles */
}

.tweet {
 /* styles */
}

但是当然现在由于webpack加载器中的哈希命名，我的.user类更改为.MyComponent__user___HZWfM。

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

Answer 1

根据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;
    }   
}

Answer 2

许多人都在努力解决这个问题，而且似乎没有任何一个人同意解决方案。我已解决的问题包括对您的捆绑器进行一些调整，并专门解决了按原样导入库的需要，而无需手动包装或编辑它们。

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

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