我正在使用 css module，但是我在组件中使用一个库来使用 JavaScript 附加推文，它以以下结构向我的组件添加了一些元素：
<div class='user'></div>
<div class='tweet'></div>
我现在想在组件的 css module中设置这些元素的样式，如下所示：
我的组件.css
.user {
/* styles */
}
.tweet {
/* styles */
}
但是，当然现在我的.user类更改为.MyComponent__user___HZWfM由于 webpack 加载器中的哈希命名。
如何在我的 css module中设置全局样式？
根据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;
}
}
很多人都为此而苦苦挣扎，似乎没有任何人商定的解决方案。我已经解决的一个涉及对您的捆绑器进行一些调整，并专门解决了按原样导入库的需要，而无需包装它们或手动编辑它们。
在我的 webpack 配置中，我已将其设置为扫描所有以 css 结尾的文件，除了 'node_modules' 和 'src/static' 文件夹中的文件。我从这里导入我的库，它们不会受到类名转换的影响，所以我可以自由地使用常规类名作为全局 css 和 className={styles.element} 约定，像往常一样用于module化 css（它将编译成 .component_element__1a2b3 或类似的东西）。
以下是使用此解决方案的工作生产 webpack 配置示例：http ://pastebin.com/w56FeDQA