如何應用`postcss-import`配置的插件

我剛剛開始使用PostCSS專門用於Webpack。當使用postcss-import來內聯外部樣式表時，我發現它的選項允許我們配置插件和變換器以應用於導入的源代碼，但是我對如何將這與適用於主要PostCSS運行器的其他選項配合在一起感到有些困惑。如何應用`postcss-import`配置的插件

例如，如果我想內聯網址，我應該將postcss-url插件添加到postcss-import，PostCSS運行器還是兩者（如果我的主樣式表也有URL引用）？

來源

2016-07-30 Filip Dupanović

當您定義webpack中的postcss插件時，建議您將postcss-import作爲您列表中的第一個插件。由於postcss-import只是將@import內聯到文件的開頭，因此後面定義的任何postcss插件都將應用於該文件。

實施例：

（對於我要去假定使用一個postcss.config.js文件的例子中，相同的邏輯適用於如果您使用的陣列，用於在的WebPack 1格式的插件）

// Header.css 
@import 'button.css'; 

.foo { 
    font-size: 3rem; 
    transform:translateY(-10px); 
} 

// Button.css 

.bar { 
    transform:translateX(20px); 
}

如果導入插件位於autoprefixer後面，它將首先在文件上應用autoprefixer插件，然後導入@import文件。因此，由當時的文件導入的前綴將已經發生的事情，輸出將是：

// postcss.config.js 
module.exports = { 
    plugins: { 
    'autoprefixer': {}, 
    'postcss-import': {} 
    }, 
}; 

// output.css 
.bar { 
    transform: translateX(20px); // Prefixing hasn't happened on the imported file 
} 
.foo { 
    font-size: 3rem; 
    transform:translateY(-10px); 
    -webkit-transform:translateY(-10px); // original file has been prefixed though 
}

如果你把進口第一，雖然，它會內聯導入的文件，然後執行autoprefixing，這意味着這兩個進口和原始文件將被autoprefixed：

// postcss.config.js 
    module.exports = { 
     plugins: { 
     'postcss-import': {}, 
     'autoprefixer': {} 
     }, 
    }; 

// output.css 
.bar { 
    transform: translateX(20px); 
    -webkit-transform:translateX(20px); // Also prefixed now 

} 
.foo { 
    font-size: 3rem; 
    transform:translateY(-10px); 
    -webkit-transform:translateY(-10px); 
}

因此，這意味着你實際上並沒有在postcss-import插件的選項重新添加插件。

來源

2017-03-02 01:37:14

如何應用`postcss-import`配置的插件

回答

相關問題