ExtractTextPlugin和postCSS - autoprefixer不工作

Question

我試圖設置webpack有一個編譯通道，它掃描一個文件樹中的所有css文件，然後生成所有樣式捆綁，autoprefixed和最小化的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，我得到的bundle.js壓縮並正確地提取在一個單獨的styles.css文件中的所有文件。但供應商前綴不適用。

我使用這個類來測試前綴：

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

我試圖改變呼叫ExtractTextPlugin.extract像ExtractTextPlugin.extract('style-loader', ['css-loader', 'postcss-loader'])在其他職位見過，但它並不能幫助所有。

任何想法？

Answer 1

看起來好像你錯位了postcss參數。據當時https://github.com/postcss/postcss-loader文檔下面的代碼應放置在您的配置的頂層，而不是下module部分：

postcss: function() { 
    return [ 
    autoprefixer 
    ] 
} 

更新。

事實上，爲這個postcss和webpack的集成工作寫了更多的配置。由於以下螺紋的，我找到了解決辦法https://github.com/postcss/postcss-loader/issues/8

首先，爲了postcss能夠工作在@import「編文件，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'ed文件合併爲一個文件，但路徑仍然相對於文件初始目錄。爲了改寫相對路徑，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 
    ]; 
]