ExtractTextPlugin und postCSS - Autoprefixer funktioniert nicht

Question

Ich versuche, Webpack einzurichten, um einen Kompilierungslauf zu haben, wo es alle CSS-Dateien in einer Dateistruktur scannt und dann eine CSS-Dateien mit allen Stilen gebündelt, autoprefixed und minimiert generiert.

Ich kann Autoprefixer Plugin nicht funktionieren.

Hier ist der relevante webpack Config-Teil:

const webpack = require('webpack') 
const path = require('path') 
const glob = require('glob') 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

// postCSS plugins 
const autoprefixer = require('autoprefixer') 

module.exports = [ 
{ 
    // another compilation pass 
}, 
{ 
    name: 'static-css', 
    entry: { 
    vendor: glob.sync(path.join(__dirname, 'assets/stylesheets/vendor/**/*.css')), 
    styles: glob.sync(path.join(__dirname, 'assets/stylesheets/src/**/*.css')) 
    }, 
    devtool: 'source-map', 
    output: { 
    path: path.join(__dirname, 'assets/stylesheets/build/'), 
    filename: 'bundle.js', 
    }, 
    module: { 
    loaders: [ 
     // css loader for custom css 
     { 
     test: /\.css$/, 
     include: path.join(__dirname, 'assets/stylesheets/src'), 
     loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader') 
     }, 
     // css loader for vendor css 
     { 
     test: /\.css$/, 
     include: path.join(__dirname, 'assets/stylesheets/vendor'), 
     loader: 'style-loader!css-loader' 
     }, 
     // other loaders for images, fonts, and svgs 
     { 
     test: /\.png$/, 
     loader: 'url-loader?limit=100000' 
     }, 
     { 
     test: /\.jpg$/, 
     loader: 'file-loader' 
     }, 
     { 
     test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'url?limit=10000&mimetype=application/font-woff' 
     }, 
     { 
     test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'url?limit=10000&mimetype=application/octet-stream' 
     }, 
     { 
     test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'file' 
     }, 
     { 
     test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'url?limit=10000&mimetype=image/svg+xml' 
     } 
    ], 
    postcss: function() { 
     return [ 
     autoprefixer 
     ] 
    } 
    }, 
    plugins: [ 
    // extract css in a .css file 
    new ExtractTextPlugin('[name].css') 
    ] 
} 
]; 

Als ich webpack laufen, bekomme ich alle komprimierten Dateien in den bundle.js und korrekt in einer separaten styles.css Datei extrahiert. Die Anbieterpräfixe werden jedoch nicht angewendet.

Ich verwende diese Klasse die Präfixe zu testen:

.autoprefixer-test { 
    display: flex; 
    transition: all .5s; 
    background: linear-gradient(to bottom, white, black); 
    user-select: none; 
} 

Ich habe versucht, den Anruf zu ändern wie ExtractTextPlugin.extract('style-loader', ['css-loader', 'postcss-loader']) ExtractTextPlugin.extract wie in anderen Beiträgen gesehen, aber es hilft nicht bei allen .

Irgendwelche Ideen?

Answer 1

Es scheint, als ob Sie die postcss Parameter verlegt haben. auf der obersten Ebene Ihrer Konfiguration und nicht unter dem module Abschnitt platziert werden entsprechend der Dokumentation bei https://github.com/postcss/postcss-loader der folgende Code sollte:

postcss: function() { 
    return [ 
    autoprefixer 
    ] 
} 

aktualisieren.

In der Tat gibt es viel mehr Konfiguration für diese Integration von Postcss und Webpack zu arbeiten geschrieben werden. Dank der folgenden Threads ich die Lösung https://github.com/postcss/postcss-loader/issues/8

Zuerst gefunden haben, um für postcss der Lage sein, für die Arbeit an @import ‚ed Dateien, postcss-import Plugin verwendet werden muss. Um dieses Plugin mit webpack zu integrieren, speziellem Parameter von initializer der Funktionsargumenten genommen wird als Argument übergeben zu postcssImport wie diese (zB Freigabedatei für heißes Nachladen oder Wiederaufbau zu beobachten.):

var autoprefixer = require('autoprefixer'); 
var postcssImport = require('postcss-import'); 
.... 
postcss: function(webpack) { 
    return [ 
    postcssImport({ addDependencyTo: webpack }), // should be first 
    autoprefixer 
    ]; 
] 

Leider bricht dieser Asset-Laden durch Webpack bei Verwendung url(...) mit relativen Pfaden. Dies geschieht, weil alle @import Ed-Dateien in einem zusammenfasst, die Pfade jedoch relativ zu den Anfangsverzeichnissen der Dateien bleiben. Um relative Pfade neu zu schreiben, sollte postcss-url Plugin verwendet werden und Konfiguration sieht nun wie folgt aus:

var autoprefixer = require('autoprefixer'); 
var postcssImport = require('postcss-import'); 
var postcssUrl = require('postcss-url'); 
.... 
postcss: function(webpack) { 
    return [ 
    postcssImport({ addDependencyTo: webpack }), 
    postcssUrl(), 
    autoprefixer 
    ]; 
]