How to include PostCSS

Vladimir Tolstikov edited this page Apr 11, 2017 · 14 revisions

Install postcss-loader package.

npm install --save-dev postcss-loader

Add postcss-loader to each stylesheet file format using in your project config/webpack.common.js (you should change it in config/webpack.dev.js, config/webpack.prod.js and in config/webpack.test.js as well). It will look like this:

module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loaders: ['to-string-loader', 'css-loader', 'postcss-loader']
      },
      {
        test: /\.(sass|scss)$/,
        loaders: ['to-string-loader', 'css-loader', 'postcss-loader', 'resolve-url-loader', 'sass-loader']
      },
      {
        test: /\.styl$/,
        loaders: ['to-string-loader', 'css-loader', 'postcss-loader', 'resolve-url-loader', 'stylus-loader']
      },
    ]
  }
}

Next make a file in the root of the project with the title postcss.config.js and add you postcss plugins as required.

An example postcss.config.js

module.exports =  {
  plugins: [
    require('postcss-smart-import')(),
    require('postcss-cssnext')(),
    require('postcss-apply')(),
    require('postcss-responsive-type')()
  ]
};

Learn more about the postcss-loader here

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.