What is the new syntax for style loader with extraction?

I can’t figure out the syntax for using style text extraction or how to use PostCSS with Webpack 2.

Current correct Webpack 1:

  plugins: [
    new ExtractTextPlugin('css/[name].css', { allChunks: false}),
  ],
  loaders: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader")
      {
  ]

New failed Webpack 2 experiment:

let extractCSS = new ExtractTextPlugin('css/[name].css');

  loaders: [
      {
        test: /\.css$/,
        loader: extractCSS.extract({
          notExtractLoader: 'style-loader',
          loaders: ['css', 'postcss']
        })
      }
  ]

Author: Fantashit

2 thoughts on “What is the new syntax for style loader with extraction?

  1. @dschissler – I’m about 2 hours away from having to do this with sass. I’ll update here with issues / success or the very possible emo tears of pain and suffering

  2. Following syntax works:

    {
      module: {
        rules: [
          {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract({
              loader: ['css', 'postcss']
            })
          }
        ]
      },
      plugins: [
        new webpack.LoaderOptionsPlugin({
          options: {
            postcss: [
              require('precss'), 
              ...
            ]
          }
        }),
        new ExtractTextPlugin({
          allChunks: true,
          filename: 'app.css'
        })        
      ]
    }
    

    with:

    +-- webpack@2.1.0-beta.25
    +-- extract-text-webpack-plugin@2.0.0-beta.4
    +-- postcss-loader@0.13.0
    

Comments are closed.