sass-loader: Sourcemap paths fail because of overriden sourceMap option.

I have a folder structure like this:

<Project root>
- Assets
  - css
    - bundles
    - modules

Webpack is run from <Project root> with the config file residing in <Project root>/Assets

In normalizeOptions.js the sourceMap option is overriden like this:

options.sourceMap = path.join(process.cwd(), "/sass.map")

All SourceMap paths of imported files look like this: ./Assets/css/bundles/Assets/css/modules/utils/_mixins.scss This is very wrong.

If i comment out that line and set sourceMap option manually, i can get sourceMaps to work:

loader: "sass-loader",
options: {
  sourceMap: path.resolve(__dirname, "css/bundles/bundle.css")
}

SourceMap paths now look correct: ./Assets/css/modules/utils/_mixins.scss

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 15 (9 by maintainers)

Most upvoted comments

@evilebottnawi I finally got source maps working! By changing this line: https://github.com/webpack-contrib/css-loader/blob/master/lib/processCss.js#L198 to:

from: options.from,

thereby allowing path rewriting of sources in css-loader, all problems were fixed!

I now have correct paths to all sourcemaps, even without my first change to sass-loader. So the problem definitely seems to be in css-loader.

Only thing was 2 extra duplicate source maps located in the root. By using adjust-sourcemap-loader like this:

var templateFn = require("adjust-sourcemap-loader")
	.moduleFilenameTemplate(
	{
		format: "webpackProtocol"
	});

and changing webpack.config.js output to:

devtoolModuleFilenameTemplate: templateFn,
devtoolFallbackModuleFilenameTemplate: templateFn

eveything now looks perfect! No duplicate sourcemaps and all sourcemap paths are correct. I even added an extra loader to the chain so it is now: css-loader -> postcss-loader -> sass-loader

ghost on Jul 12, 2017