使用PostCSS自動重設CSS重置

Question

我正在嘗試postCSS項目使用create-react-app starter回購與postCSS和導入每個組件的.css文件。也就是說，每個組件都包含一個import 'styles/componentA.css';或幾個。

爲了在瀏覽器中創建一致的樣式，我想導入CSS重置。我試了幾件事情：

1. 導入.css文件包含基於Eric Meyer的重置一個標準的CSS重置。

2. 使用autoreset插件進行postCSS。

對於第一種選擇，在dev模式的CSS imports添加爲<style>標籤到文檔中。 CSS重置出現在<style>標記列表中的最後一個，儘管它被導入到頂層組件中。理想情況下，CSS Reset將首先導入。最後意味着它會覆蓋我適用於基本元素的任何樣式（如h1 {font-size: 40px;}）

對於第二個選項（使用autoreset），它沒有出現有辦法將特定規則應用於特定元素的方法。例如，我想僅將list-style: none應用於ul和ol元素。

是否可以使用autoreset插件在postCSS中執行類似Eric Meyer的CSS重置？還是我的方向完全錯誤，誤解了它的目的？

Answer 1

我不使用反應，但當我使用組件並重置PostCSS（我在這裏構建東西時：http://ecss.io/chapter7.html）時，我遇到了類似的問題。我不想爲每個組件重新加載重置，只是傳統上使用的全局重置組件。

因此，我只爲'globalCSS'提供了一個「組件」。這是第一個在重置中加載並加載的組件（以及全局PostCSS變量和混合），以便後續組件可以在不重新聲明的情況下訪問它們。

這是一種您可以使用/適應的方法嗎？