Syntax should be updated to new webpack loaders syntax?

[wlingke]

Syntax here should be updated too?

https://github.com/webpack/webpack.js.org/blob/develop/content/how-to/upgrade-from-webpack-1.md#moduleloaders-is-now-modulerules

[bfricka]

Definitely. It should also follow the pattern of use: [], so we should be able to convert:

const extractCSS = new ExtractTextPlugin(/*...*/);

module.exports = () => {
  return {
    postcss: {plugins: [autoprefixer(autoprefixerOpts)], sourceMap: true},
    loaders: [
      {test: /\.scss/i, loader: extractCSS.extract(['css?sourceMap', 'postcss', 'sass?sourceMap'])}
    ]
  };
};

to the new use + options syntax:

const extractCSS = new ExtractTextPlugin(/*...*/);
const postcssOpts = postcss: {plugins: [autoprefixer(autoprefixerOpts)], sourceMap: true};

module.exports = () => {
  return {
    rules: [
      {test: /\.scss/i, use: [
        extractCSS.extract([  // This is basically "use"
          {loader: 'css', options: {sourceMap: true}}
          {loader: 'postcss', options: postcssOpts}
          {loader: 'sass', options: {sourceMap: true}
        ])     
      ]}
    ]
  };
};

This seems like the right approach unless the new "rules" syntax allows extract-text-webpack-plugin to somehow work as the first item in the "use" array. I haven't looked at the source yet to see how this might work, but it seems unlikely.

[wlingke]

Doesn't seem like it works yet, but hopefully they will update it soon to match with the new webpack2 beta25

[jhnns]

Yes, I agree. This could be very frustrating for users when migrating to webpack 2.

[dsebastien]

Hello,

I'm currently trying to figure out how i can configure this plugin with post-css like I did with Webpack 1.x. Is this supposed to work already in some form?

Here's what I have configured for now and that isn't working (which I guess is due to this very issue :p):

// Support for PostCSS
            {
                test: /\.scss$/,
                use: ExtractTextWebpackPlugin.extract({
                    fallbackLoader: "style-loader",
                    loader: [
                        {
                            loader: "css-loader",
                            query: {
                                modules: true, // to check if needed
                                sourceMap: true,
                            },
                        },
                        {
                            loader: "postcss-loader",
                            options: {
                                sourceMap: true,
                                plugins: () => commonData.postcss,
                            },
                        },
                    ],
                }),
            },

Where commonData.postcss is:

postcss: [
        // reference: https://github.com/postcss/postcss-import
        // https://github.com/postcss/postcss-import/issues/244
        require("postcss-import")(),

        // plugin to rebase, inline or copy on url().
        // https://github.com/postcss/postcss-url
        require("postcss-url")(),

        require('postcss-nesting')(),
        require('postcss-simple-extend')(),
        require("postcss-cssnext")({
            browsers: [ "last 3 versions" ]
        })
    ],

The above gives me the following errors:

�[1m�[31mERROR in ./src/app/css/vendor.scss
Module parse failed: C:\LocalData\DEV\Workspace\AAH-Stark\node_modules\extract-text-webpack-plugin\loader.js?{"omit":1,"remove":true}!style-loader!css-loader?{"modules":true,"sourceMap":true}!postcss-loader!C:\LocalData\DEV\Workspace\AAH-Stark\node_modules\extract-text-webpack-plugin\loader.js?{"omit":1,"remove":true}!style-loader!css-loader?{"modules":true,"sourceMap":true}!postcss-loader!C:\LocalData\DEV\Workspace\AAH-Stark\src\app\css\vendor.scss Unexpected character '@' (8:0)
You may need an appropriate loader to handle this file type.
| 
| @import "../../../node_modules/angular-material-steppers/dest/angular-material-steppers.css";
| �[39m�[22m

Can I change this somehow for now and get it working?

[renarsvilnis]

@dsebastien This is my production webpack config entries only for scss I got set up few days ago. Only thing is that sourceMaps get always generated, even if I don't want to.

{
  test: /\.(scss)$/i,
  // using "loader" instead of newer "use"
  loader: ExtractTextPlugin.extract({
    loader: [
      {
        loader: 'css-loader',
        // current extract-text-plugin supports query not never options format
        query: {
          importLoaders: 3,
          minimize: true,
          // Even if disabled sourceMaps gets generated
          sourceMap: false
        }
      },
      {loader: 'postcss-loader'},
      {loader: 'resolve-url-loader'},
      {
        loader: 'sass-loader',
        query: {
          // Enable sourcemaps for resolve-url-loader to work properly
          sourceMap: true
        }
      }
    ]
  })
}

plugins: [
  /**
   * LoaderOptionsPlugin is used for aid migrationfor older loaders
   * @reference https://github.com/webpack/webpack.js.org/blob/develop/content/how-to/upgrade-from-webpack-1.md#loaderoptionplugin-context
   */
  new webpack.LoaderOptionsPlugin({
    minimize: true,
    debug: false,
    options: {
      /**
       * resolve-url-loader fix
       * @reference https://github.com/bholloway/resolve-url-loader/issues/33#issuecomment-249830601
       */
      context: path.join(__dirname, 'src'),
      output: {
        path: path.join(__dirname, 'dist')
      },
      /**
       * Legacy postCSS config
       * @reference https://github.com/azat-io/webpack2-css-modules-demo/blob/master/scripts/webpack.config.babel.js
       */
      postcss: [
        require('autoprefixer')({
          browsers: ['last 2 versions', 'IE > 10'],
          cascade: true,
          remove: true
        }),
        require('css-mqpacker')()
      ]
    }
  }),
  new ExtractTextPlugin({
    filename: '[name].css',
    allChunks: true
  })
]

[dsebastien]

Thanks @renarsvilnis , seems to be working! On to the next issue now :D

[quantuminformation]

I previously used

    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: PATHS.src
      },
      {
        test: /\.pcss$/,
        loaders: [
          'style-loader',
          'css-loader?importLoaders=1',
          'postcss-loader'
        ]
      },
      {
        test: /\.css$/,
        loaders: [
          'style-loader',
          'css-loader'
        ]
      }
    ]

What should I use now if I want to extract all my styles using the ExtractTextPlugin?

[kellyrmilligan]

this was frustrating to me, I was trying to be more up to date on the syntax and it failed! glad I found this.