用css模塊我怎麼定義一個全局類

我使用的CSS模塊，但是我在追加使用JavaScript鳴叫組件使用庫增加了一些元素，以我的組件的結構如下：用css模塊我怎麼定義一個全局類

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

我想現在風格的分量我的CSS模塊這些元素，如下所示：

MyComponent.css

.user { 
/* styles */ 
} 

.tweet { 
/* styles */ 
}

然而，當然現在我的.user類更改爲.MyComponent__user___HZWfM，這是由於webpack加載器中的散列命名。

如何在我的css模塊中設置全局樣式？

來源

2015-12-15 Navela

根據css modules docs，:global切換到當前選擇器的全局範圍。例如:global(.xxx)

所以這應該工作：

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

來源

2015-12-15 01:30:50

很多人一直在努力與這一點，似乎沒有要在溶液中的任何一個約定。我已經解決的一個涉及到你的打包器的一些調整，並專門解決了需要導入庫，而不必手動包裝或編輯它們。

在我的webpack配置中，我已經將它設置爲掃描所有結束css的文件，除了'node_modules'和'src/static'文件夾中的文件。我從這裏導入我的庫，他們沒有遭受類名轉換，所以我可以像通常一樣爲模塊化css使用常規類名作爲全局css和className = {styles.element}約定（它將編譯爲.component_element__1a2b3或類似的東西）。

下面是使用此解決方案正在運行的生產webpack配置示例： http://pastebin.com/w56FeDQA

來源

2016-11-20 21:37:15

用css模塊我怎麼定義一個全局類

回答

相關問題