Css-loader: Incompat with webpack2 LoaderOptionsPlugin

[xuanyan0x7c7]

In lib/loader.js
https://github.com/webpack/css-loader/blob/master/lib/loader.js#L101
this.options may be rewritten by LoaderOptionsPlugin in the following line
https://github.com/webpack/webpack/blob/master/lib/LoaderOptionsPlugin.js#L29
thus this.options.context could be undefined and cause an error.
Should we change it to this.context to fix the bug?

[rbudiharso]

+1

I've encountered Module build failed: TypeError: Path must be a string. Received undefined and changing this.options.context to this.context solved the issue.

[ngoctranfire]

How exactly did you fix this? I got this same exact error...? I mean I can change it directly, but it seems the bug stopped appearing for you all of a sudden...?

[pospi]

I'm still getting the issue too, you can switch to the fork I'm about to pull request until it's merged into mainline (:

[tleunen]

@sokra Looks like there's an easy fix for that, can we get this in?

[rnons]

I'm afraid #356 is not enough, there are other places using this.option, for example, https://github.com/webpack/css-loader/blob/master/lib/getLocalIdent.js#L11

var request = path.relative(options.context, loaderContext.resourcePath);

Maybe this should be fixed from the LoaderOptionsPlugin side

[kachkaev]

Once consequence of this incompatibility I encountered today was that I was in not being able to set {discardComments:{removeAll: true}} via webpack.LoaderOptionsPlugin. This did remove comments:

// ...
  }, {
    test: /\.css$/,
    loader: ExtractTextPlugin.extract({
      fallbackLoader: 'style-loader',
      loader: 'css-loader?{discardComments:{removeAll: true}}',
    }),
  }, {
    test: /\.less$/,
    loader: ExtractTextPlugin.extract({
      fallbackLoader: 'style-loader',
      loader: ['css-loader?{discardComments:{removeAll: true}}', 'less-loader'],
    }),
// ...

config.plugins.push(
  new webpack.LoaderOptionsPlugin({
    minimize: true,
  })
);
// ...

This and variations did not:

// ...
  }, {
    test: /\.css$/,
    loader: ExtractTextPlugin.extract({
      fallbackLoader: 'style-loader',
      loader: 'css-loader',
    }),
  }, {
    test: /\.less$/,
    loader: ExtractTextPlugin.extract({
      fallbackLoader: 'style-loader',
      loader: ['css-loader', 'less-loader'],
    }),
// ...

config.plugins.push(
  new webpack.LoaderOptionsPlugin({
    minimize: true,
    discardComments: {
      removeAll: true
    }
  }
});
// ...

This is because css-loader looks into query rather than options if I'm not wrong.

So for those who are willing to get rid of ?... in the loader as I have been just trying, here is a tip: _DON'T!_ (while this issue is open).

:–)

[dtothefp]

mocking up output and context in LoaderOptionsPlugin fixes the issue for me

new webpack.LoaderOptionsPlugin({
      sourceMap: true,
      minimize: true,
      discardComments: {
        removeAll: true
      },
      options: {
        context: '',
        output: //webpackconfig.output
      }
})