fix: source map sources names

[sprat]

I want to generate an external CSS file with a source map when I build my application, so I use the following Webpack configuration, as documented in the README:

var srcDir = __dirname + '/src/';
var distDir = __dirname + '/dist/';
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('[name].css');

module.exports = {
    context: srcDir,
    entry: {
        'nany': './index.js',
    },
    devtool: 'source-map',
    output: {
        path: distDir,
        filename: '[name].js',
        library: 'Nany',
        libraryTarget: 'umd'
        //devtoolModuleFilenameTemplate: '[resource-path]'  // remove webpack:/// prefix
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: extractCSS.extract('css-loader?sourceMap') }
        ]
    },
    plugins: [
        extractCSS
    ]
};

However, the sources names are not generated properly in the .map file: they are formatted as webpack:///webpack:///dashboard.css, which is a bit strange.

I've tried to understand what's going on, but I'm a bit lost.

The css-loader issues a sourceRoot with value webpack:// which is probably a part of the cause. But it's not necessarily bad if there's no other loader consuming the output of css-loader, not sure.

Then, the different source maps are assembled with webpack-sources helpers. If I print source.map() after renderExtractedChunk, the sources are formatted as webpack:///dashboard.css

But, I guess webpack is probably adding another webpack:/// prefix due to the devtoolModuleFilenameTemplate config, but I don't understand how it is achieved after the previous operation.

I'm sure sure how the problem could be solved. Maybe we should file a bug/feature request to the css-loader project in order to allow another sourceRoot? Maybe there's another way to assemble the source maps in the Extract text plugin to avoid the problem? Maybe the bug is in webpack-sources helpers? Any idea?

[sprat]

Sorry, forgot to mention the version of the tools:
"css-loader": "0.25.0",
"extract-text-webpack-plugin": "1.0.1",
"webpack": "1.13.2"

[sprat]

Relevant issue in css-loader: webpack-contrib/css-loader#280

[scottdj92]

Closing due to old webpack version. If your issue persists, feel free to re-open.

[brokenmass]

i still have the same issue with webpack2

[scottdj92]

Are you seeing this with the most recent version of this plugin?

[brokenmass]

Hi @scottdj92.
Yes I'm using the most recent version of the plugin.
relevant webpack config is

{
  test: /\.scss$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      {
        loader: 'css-loader',
        options: {
          importLoaders: 1,
          localIdentName: '[local]--[hash:base64:5]',
          modules: true,
          sourceMap: true
        }
      },
      {
        loader: 'postcss-loader',
        options: {
          plugins () {
            return [
              autoprefixer({
                browsers: [
                  '> 1%',
                  'last 3 versions',
                  'iOS > 6',
                  'ie > 9',
                  'not ie < 10'
                ]
              })
            ];
          }
        }
      },
      'sass-loader?sourceMap'
    ]
  })
}

sourceMap sources path are in the form "webpack:///webpack:///~/bla/bla/bla/file.scss".

Anyway it looks like the problem is still caused by css-loader that force a 'wrong' sourceRoot.

I created a PR there webpack-contrib/css-loader#430 to fix the issue.

edited: updated PR link

[alexander-akait]

Fixed webpack-contrib/css-loader#430. Feel free to feedback and reopen if problem still exists. Thanks!