I am using postcss, autoprefixer and extract-text-webpack-plugin with Webpack 3, but when compiled I am missing prefixes. The compiled css only contains the -webkit prefix and not the -ms and -moz prefixes.
I am not sure what I am doing wrong.
My config:
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.s[ac]ss$/,
loader: ExtractText.extract({
use: [
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
sourceMap: true,
plugins: () => [autoprefixer()]
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
],
fallback: 'style-loader',
})
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: 'file?=name/fonts/[name].[ext]'
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [{
loader: 'file-loader',
options: {
name: '[name]-[hash:8].[ext]',
pluginPath: BUILD_DIR + '/images/',
outputPath: BUILD_DIR + '/images/'
}
}]
}]
},
And my browserlist in package.json contains:
"browserslist": [
"defaults",
"not ie < 9",
"last 2 versions"
],