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”中的那些文件。和＆＃39; src / static＆＃39;文件夹。我从这里导入我的库，他们没有遭受classname转换，所以我可以像往常一样使用常规类名为全局css和className = {styles.element}约定的模块化css（它将编译为.component_element__1a2b3或类似的东西））。

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

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

2 个答案: