CSS Autoprefixer mit Webpack

Question

Ich habe versucht, Webpack mit LESS und Autoprefixer zu konfigurieren, aber Autoprefixer scheint nicht zu funktionieren. Meine css- oder less-Dateien werden nicht autoprefixiert. Beispiel: display: flex Aufenthalte display: flex

ich meine webpack Config unten gesetzt haben: für ältere Browser-Versionen

var autoprefixer = require('autoprefixer'); 

module.exports = { 
    entry: { 
    bundle: "./index.jsx" 
    }, 
    output: { 
    path: __dirname, 
    filename: "[name].js" 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx$/, 
     exclude: /(node_modules|bower_components)/, 
     loaders: ['react-hot', 'babel-loader'] 
     }, 
     { 
     test: /\.less$/, 
     loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader!less-loader") 
     }, 
     { 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader") 
     } 

    ], 
    postcss: function() { 
     return [autoprefixer]; 
    } 
    }, 
    plugins: [ 
    new webpack.BannerPlugin(banner), 
    new ExtractTextPlugin("style.css") 
    ], 
    devtool: 'source-map', 
    devServer: { 
    stats: 'warnings-only', 
    } 
}; 

Answer 1

So gefunden das Problem. Dumm mich, der postcss-Block muss direkt unter der Webpack-Config sein, ich hatte es in Modulblock gesteckt. Mein Fehler.

EDIT: Dies ist, wie es hätte sein sollen:

var autoprefixer = require('autoprefixer'); 

module.exports = { 
    ... 
    postcss: function() { 
     return [autoprefixer]; 
    } 
    ... 
}; 

Also anstatt es in den Modulen Block setzen, musste ich es setzen sich direkt unter dem Hauptblock wie oben gezeigt.

Answer 2

Sie müssen einrichten postcss in Ihrem webpack Config.

Standard für Autoprefixer ist die letzte 2 Versionen von Browsern oder Browsern, die mindestens 5% Marktanteil haben.

https://github.com/postcss/autoprefixer#browsers

postcss: [ 
    autoprefixer({ 
     browsers: ['last 3 versions', '> 1%'] 
    }) 
    ], 

Er sagt, dass Sie den letzten 3 Versionen von Browsern oder Browser unterstützen, die mindestens 1% Marktanteil haben.

Answer 3

Ich hatte ein ähnliches Problem mit Webpack 2.x.x und benutzerdefinierte Eigenschaften sind nicht mehr in der Konfiguration erlaubt. Ich habe eine Lösung für diesen anderen S.O. post gefunden: Using auto prefixer with postcss in webpack 2.0. Für den Fall, aus einem unbekannten Grund Link in 404 führen würde ich die wichtigsten Antworten hier kompilieren:

Webpack 2.xx eingeführt webpack.LoaderOptionsPlugin() Plugin, wo Sie die Loader Option Plugins alle definieren müssen . Wie, Autoprefixer ist ein Plugin für Postcss-Loader. Also muss es hier gehen. New Config sollte wie folgt aussehen:

module: { 
    rules: [ 
    { 
     test: /\.scss$/, 
     loaders: ['style-loader', 'css-loader', 'sass-loader', 
     'postcss-loader'] 
    } 
    ] 
}, 

plugins: [ 
    new webpack.LoaderOptionsPlugin({ 
    options: { 
     postcss: [ 
     autoprefixer(), 
     ] 
    } 
    }) 
], 

Das ist für mich gearbeitet, aber wie durch Kreig erwähnt, gibt es keine Notwendigkeit für LoaderOptionsPlugin(). Sie können jetzt Optionen direkt an die Loader-Deklaration übergeben:

const autoprefixer = require('autoprefixer'); 

let settings = { 
/*...*/ 
    module: { 
    rules: [{ 
     test: /\.css$/, 
     use: [ 
      /*...other loaders...*/ 
      { 
      loader: 'postcss-loader', 
       options: { 
       plugins: function() { 
        return [autoprefixer] 
       } 
       } 
      } 
      /*...other loaders...*/ 
     ] 
    }] 
    }   
} 
/*...*/ 

Die Sache ist, ich habe die 2. mit Webpack 2.5.1 versucht, aber es ist fehlgeschlagen. Credits gehen an Pranesh Ravi und Kreig.