postcss-loader: [2.0.3] options.plugins `{Function}` don't get applied (`webpack.config.js`)

webpack.config.js

var webpack = require('webpack');
module.exports = {
  entry: __dirname + '/index.js',
  output: {
    publicPath: '/',
    filename: './bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'stage-0', 'react']
        }
      },
      {
          test : /\.css$/,
          use: [
            'style-loader',
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1 // 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                plugins: function () {
                  return [
                    require('precss'),
                    require('autoprefixer')
                  ];
                }
              }
            }
          ]
      }
    ]
  }
};

my css

App.css

@import 'config.css';

.title {
  display: flex;
  background: $blue;
  width: $column
}

config.css

$blue: #ff0000;
$column: 200px;

package.json

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 21 (11 by maintainers)

Most upvoted comments

actually,

ident: 'postcss',

fixed my problem. My problem was that when I just start building using webpack3 watch mode, postcss-loader worked fine, however, if I got typos to have a syntax error in a js file, for example, I accidentally typed two commas, the js file broked, right?

Right after I fixed the comma thing, postcss-loader immediately had this Module build failed: ModuleBuildError: Module build failed: TypeError: Cannot read property 'postcss' of null error and my css file broked.

edwardfxiao on Jul 12, 2017

@psirenny I update the docs soon, I was reluctant tbh, bc this should be handle automatically since webpack >= 2.2.1 you need to add an ident: 'postcss' to loader options, bc as you mentioned the options need to be serialized by webpack internally.

webpack.config.js

{
   loader: 'postcss-loader'
   options: {
      ident: 'postcss',
      plugins: () => [ require('postcss-plugin')({...options}) ]
   }
}

michael-ciniawsky on Jul 2, 2017

I keep this issue open for tracking porposes since a {Function} should normally work

michael-ciniawsky on May 9, 2017

Thanks , use {Array} in options.plugins is OK, thanks u 😛

Malenconiaprincep on May 9, 2017

And… it shouldn’t be needed anymore ‘normally’, but in webpack < 2.2.1, one needed to use an identifier, when using so called Complex Options ({Function}/require()), so try this aswell

webpack.config.js

{
  loader: 'postcss-loader',
  options: {
    ident: 'postcss', // <= this line
    plugins: () => [...plugins]
  }
}

michael-ciniawsky on May 9, 2017