ExtractTextPluginとpostCSS - autoprefixerが動作しません

Question

webpackをセットアップして、1つのファイルツリー内のすべてのcssファイルをスキャンし、すべてのスタイルがバンドルされ、自動プレフィックスされ、最小化されたCSSファイルを生成します。

autoprefixerプラグインを動作させることができません。

はここでは関係WebPACKのコンフィグ一部です：

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') 
    ] 
} 
]; 

私はWebPACKのを実行すると、私は別のstyles.cssファイルにbundle.jsで圧縮し、正しく抽出されたすべてのファイルを取得します。しかし、ベンダープレフィックスは適用されません。

私は接頭辞をテストするには、このクラスを使用しています：私は他の記事で見られるようにExtractTextPlugin.extract('style-loader', ['css-loader', 'postcss-loader'])ようExtractTextPlugin.extractの呼び出しを変更しようとしたが、それは全く役に立ちません

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

。

アイデア？

Answer 1

postcssのパラメータが間違っているようです。

postcss: function() { 
    return [ 
    autoprefixer 
    ] 
} 

更新：https://github.com/postcss/postcss-loaderでのドキュメントによると、次のコードは、構成の最上位レベルではなくmoduleセクションの下に配置する必要があります。

実際、postcssとwebpackを統合して動作させるためには、さらに多くの設定が必要です。私は解決策https://github.com/postcss/postcss-loader/issues/8

ファーストを見つけた次のスレッドのおかげで、postcssは@import「EDファイルの作業のためにできるようにするために、postcss-importプラグインを使用する必要があります。 WebPACKので、このプラグインを統合するには、次のようにpostcssImportに引数として渡された初期化子の関数の引数から取られた、特別なパラメータ（例えば、ホットリロードや再構築のために見ていたファイルを有効にします。）：悲しいこと

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

、これは資産の読み込みスルーを破ります相対パスでurl(...)を使用する場合はwebpack。これは、postcss-importはすべて@importのファイルを1つにマージしますが、パスはファイルの最初のディレクトリに相対的なままであるためです。相対パスを書き換えるためには、postcss-urlプラグインを使用する必要がありますし、設定は次のようになります。

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