ExtractTextPlugin and postCSS - autoprefixer not working

Question

I am trying to configure webpack to go through compilation, where it scans all the css files in one file tree, and then generates the css files with all the related styles automatically compiled and minimized.

I cannot get the autoprefixer plugin to work.

Here is the relevant part of webpack configuration:

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

When I run webpack, I get all the files compressed in the bundle.js file and are correctly extracted to a separate styles.css file. But vendor prefixes do not apply.

I use this class to check prefixes:

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

I tried changing the call to ExtractTextPlugin.extract as ExtractTextPlugin.extract('style-loader', ['css-loader', 'postcss-loader']) , as seen from other posts, but that doesn't help at all.

Any ideas?

Answer 1

It looks like you missed the postcss options. According to the documentation at https://github.com/postcss/postcss-loader , the following code should be placed at the top level of your configuration, and not in the module section:

 postcss: function() { return [ autoprefixer ] } 

Refresh.

In fact, for this integration of postcss and webpack, you need to write a lot more settings. Thanks to the following topic, I found a solution https://github.com/postcss/postcss-loader/issues/8

Firstly, for postcss to work with @import 'ed files, you must use the postcss-import plugin. To integrate this plugin with webpack (for example, enable file browsing for a hot reload or rebuild), a special parameter taken from the arguments to the initializer function is passed as the postcssImport argument as follows:

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

Unfortunately, this disrupts asset loading via webpack when using url(...) with relative paths. This is because postcss-import merges all @import 'ed files into one, but the paths remain relative to the source directory files. To rewrite relative paths, use the postcss-url plugin, and now the configuration looks like this:

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