Loaders

style-loader

style-loader adds CSS to the DOM by injecting a style tag.

css-loader

The css-loader interprets @import and url() like import/require() and will resolve them.

postcss-loader

Use it after css-loader and style-loader, but before other preprocessor loaders like e.g sass|less|stylus-loader, if you use any.

Autoprefixer

Autoprefixer is a service for managing vendor prefixes. It adds missing prefixes and deletes obsolete ones.

Extract CSS

Extract text from a bundle, or bundles, into a separate file.
Needed in production mode.

Configuration

Use in js:

import from './file.css'
import from './file.less'
import from './file.sass'

Development

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
              plugins: [
                autoprefixer({
                  browsers: ['> 5%']
                })
              ]
            }
                    }
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
              plugins: [
                autoprefixer({
                  browsers: ['> 5%']
                })
              ]
            }
                    },
                    'less-loader'
                ]
            }
        ]
    }
}

Production

module.exports = {
    module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
                        {
              loader: 'css-loader',
              options: {
                importLoaders: 1,
                minimize: true,
                sourceMap: true,
              },
            },
            {
              loader: 'postcss-loader',
              options: {
                plugins: [
                  autoprefixer({
                    browsers: ['> 5%']
                  })
                ]
              }
            },
          ]
        })
      },
      {
        test: /\.less$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
                        {
              loader: 'css-loader',
              options: {
                importLoaders: 1,
                minimize: true,
                sourceMap: true,
              },
            },
            {
              loader: 'postcss-loader',
              options: {
                plugins: [
                  autoprefixer({
                    browsers: ['> 5%']
                  })
                ]
              }
            },
            'less-loader']
        })
      },
    ]
  },
  plugins: [
    // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
    new ExtractTextPlugin({filename: '[name].[hash:8].css'})
  ],
}