我试过复制了很多webpack设置,但我似乎无法让postcss-loader Autoprefixer工作。我在我的项目中大量使用Flexbox,我真的想让webpack在yarn build上为旧浏览器添加前缀。现在,SCSS被编译成CSS,但没有添加前缀。这是我的webpack配置目前的样子:
webpack.js
const webpack = require('webpack');
const merge = require('webpack-merge');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
var autoprefixer = require('autoprefixer');
const baseConfig = require('./base.config.js');
module.exports = merge(baseConfig, {
output: {
filename: 'app.bundle.min.js',
path: path.join(__dirname, '../../assets')
},
module: {
rules: [
{
test: /\.(scss|css)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: { sourceMap: true, minimize: true }
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [require('autoprefixer')]
}
},
{
loader: 'sass-loader',
options: { sourceMap: true, minimize: true }
}
],
fallback: 'style-loader'
})
}
]
},
plugins: [
new ExtractTextPlugin('app.bundle.min.css'),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [autoprefixer()]
}
}),
// Minimize JS
new UglifyJsPlugin({ sourceMap: true, compress: true })
// Minify CSS
/*new webpack.LoaderOptionsPlugin({
minimize: true,
}),*/
]
});
我相信你需要调用它的构造函数,即require('autoprefixer')()
我在PostCss Loader README看到这个。
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('autoprefixer')({...options}), // calls constructor with optional options
...,
]
}
}
]
}