Wie werden `postcss-import` konfigurierte Plugins angewendet?

Question

Ich habe PostCSS gerade erst mit Webpack gestartet. Wenn ichfür externe Stylesheets verwende, sehe ich, dass es Optionen erlauben, Plugins und Transformer für importierte Quellen zu konfigurieren, aber ich bin ein wenig verwirrt darüber, wie dies zusammen mit anderen Optionen für den PostCSS-Runner passt.

Zum Beispiel, wenn ich URLs einbinden möchte, sollte ich das postcss-url Plugin zu , dem PostCSS-Runner oder beiden hinzufügen (wenn mein Haupt-Stylesheet auch URL-Referenzen hat)?

Answer 1

Es wird empfohlen, das erste Plugin in Ihrer Liste zu machen, wenn Sie die Plugins für PostCss in Webpack definieren. Da postcss-import nur die @import an den Anfang der Datei einbindet, wird jedes danach definierte postcss-Plugin darauf angewendet.

Beispiel:

(Für das Beispiel i gonna annehmen, dass Sie eine postcss.config.js Datei zu verwenden, gilt die gleiche Logik, wenn Sie ein Array für die Plugins im webpack 1-Format)

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

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

// Button.css 

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

Wenn das Import-Plugin hinter autoprefixer steht, wird zuerst das Plugin autoprefixer auf die Datei angewendet und anschließend die Datei @import importiert. Also von der Zeit wird die Datei der Vorfixierung importiert hat bereits geschehen ist, wird der Ausgang sein:

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

Wenn Sie den Import setzen allerdings zuerst, es wird die importierte Datei inline und führen Sie dann die autoprefixing bedeutet dies sowohl die importiert und die Originaldatei autoprefixed werden:

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

Also das bedeutet, dass Sie nicht wirklich Plugins hinzufügen müssen wieder in der Option der postcss-import Plugin.