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 
    ]; 
]