css autoprefixer with webpack

Question

私はLESSとAutoprefixerでwebpackを設定しようとしていますが、autoprefixerは動作していないようです。私のCSS以下のファイルは自動プレフィックスされません。例： display: flex滞在、私は以下の私のWebPACKの設定を入れている

display: flex：

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

これで問題が見つかりました。愚かな私は、postcssブロックはwebpack設定の直下にある必要があります、私はモジュールブロックに入れました。私の悪い。

EDIT：これは、それがされている必要があります方法です。だからではなく、モジュールブロック内に置くの

var autoprefixer = require('autoprefixer'); 

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

、私は上記のように、メインブロックの下にそれを直接入れていました。

Answer 2

あなたは、古いバージョンのブラウザのためにあなたのWebPACKの設定でpostcssを設定する必要があります。

デフォルトのオートプレフィクサーは、市場シェアが5％以上のブラウザまたはブラウザーの最新バージョン2です。

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

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

それはあなたが少なくとも1％の市場シェアを持つブラウザやブラウザの最後の3つのバージョンをサポートしていることを述べています。

Answer 3

私はWebpack 2.x.xで同様の問題が発生しており、カスタムプロパティは設定で許可されなくなりました。この他のS.O投稿の解決策を見つけました：Using auto prefixer with postcss in webpack 2.0。このリンクは、404につながるいくつかの未知の理由のためのケースでは、私はここに最も関連性の高い答えをコンパイルします。

WebPACKの2.xxのwebpack.LoaderOptionsPlugin（導入）あなたはすべてのローダオプションのプラグインを定義する必要がありますプラグイン。同様に、autoprefixerはpostcss-loaderのためのプラグインです。だから、ここに行かなければならない。 新設定は次のようになります。

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

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

これは私のために働いたが、Kreigで述べたようにLoaderOptionsPluginの必要は（）がありません。ローダー宣言に直接オプションを渡すことができます：

const autoprefixer = require('autoprefixer'); 

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

私はWebpack 2.5.1で2回目を試しましたが、失敗しました。クレジットはPranesh RaviとKreigに送られます。