`postcss-import`で設定されたプラグインはどのように適用されますか

Question

私はWebpackでPostCSSを使用し始めました。 postcss-importをインライン外部スタイルシートに使用する場合、プラグインとトランスフォーマーをインポートしたソースに適用するように設定するオプションがありますが、メインPostCSSランナー用に設定された他のオプションとどのように適合するかはちょっとわかりません。

たとえば、postcss-urlプラグインをpostcss-import、PostCSSランナーまたはその両方に追加する必要がありますか（メインスタイルシートにもURL参照がある場合）？

Answer 1

webpackでpostcss用のプラグインを定義するときは、postcss-importをリストの最初のプラグインにすることをおすすめします。 postcss-importはファイルの先頭に@importをインラインで挿入しているので、後で定義されたpostcssプラグインがそのファイルに適用されます。

例：

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

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

// Button.css 

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

（あなたはWebPACKの1形式のプラグインのための配列を使用する場合、私はつもりだあなたはpostcss.config.jsファイルを使用すると仮定たとえば、同じロジックが適用されます）インポートプラグインが自動プレフィクサーの背後にある場合は、まず自動プレフィクサープラグインをファイルに適用し、その後に@importファイルをインポートします。だから、ファイルは接頭辞がすでに起きているだろう、インポートされた時点で、出力は次のようになります。あなたがが、それがインポートされたファイルをインライン化してからautoprefixingを行いますインポートが最初に置けば

// 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 
} 

、これは両方の意味しますインポートとオリジナルのファイルが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プラグインのオプションで再びプラグインを追加する必要はありませんを意味します。