0

I want to know the order in which we should use autoprefixer, lost, postcssflexibility in webpack ?

Édouard Lopez
  • 40,270
  • 28
  • 126
  • 178
Nirmalya Ghosh
  • 2,298
  • 3
  • 18
  • 33
  • Are you finding variable outcome from changing the order? – Sean Larkin Apr 04 '16 at 15:24
  • No. Not any intended ones. If I keep the plugins in the general order, they are not throwing errors while compiling but the grids (using lost) are not showing properly in ie9. Here's the order, in which I'm adding the plugins: ```postcsspartialimport, postcssmixins, postcssnested, postcsssimplevars, lost, autoprefixer, postcssflexibility``` – Nirmalya Ghosh Apr 05 '16 at 06:41

1 Answers1

1

Here's a basic example (prefixing through postcss, applying precss plugin etc.).

webpack 1

const autoprefixer = require('autoprefixer');
const precss = require('precss');

module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loaders: ['style', 'css', 'postcss'],
      },
    ],
  },
  // PostCSS plugins go here
  postcss: function () {
    return [autoprefixer, precss];
  },
};

webpack 2

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss', // Needed for now
            plugins: function () {
              // Set up plugins here
              return [
                require('autoprefixer'),
                require('precss'),
              ];
            },
          },
        },
      ],
    },
  ],
},

Another way would be to push the plugins to postcss.config.js as instructed in the postcss-loader documentation. It is more difficult to compose that, though.

Source.

Juho Vepsäläinen
  • 26,573
  • 12
  • 79
  • 105