Strange CSS sourcemap filename path

[danauclair]

CSS sourcemaps have strange repeated paths. This looks like it may have something to do with webpack's output.devtoolModuleFilenameTemplate config.

Example:
webpack:///./src/containers/App/src/src/containers/App/App.scss

This makes it hard to map all of the components at once in Chrome's dev tools (for saving back to source files).

[danauclair]

It seems like autoprefixer being in the loader chain may be causing this.

[quicksnap]

Any update on this? Are we using the correct version of css-loader re: webpack-contrib/css-loader#154

[sagiyemi]

@quicksnap @danauclair Applying the autoprefixer first solves this issue

Change

  { test: /\.less$/, loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=2&sourceMap!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap=true&sourceMapContents=true') },
  { test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=2&sourceMap!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true') },

to

  { test: /\.less$/, loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=2&sourceMap!less?outputStyle=expanded&sourceMap=true&sourceMapContents=true!autoprefixer?browsers=last 2 version') },
  { test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=2&sourceMap!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true!autoprefixer?browsers=last 2 version') },