Development Tools

William Hurst
William Hurst
21,230 Points

Webpack adding CSS styles to wrong sourcemap

I have setup a template for developing WordPress websites. It uses Foundation for the framework and Webpack for the dev/build tool.

I have separated everything into separate files like so:

  • styles -- foundation /_foundations.scss -- _settings.scss _theme.scss main.scss

I am using sourcemaps to tell me were each CSS rule is coming from.

For an example: if I inspect an element in the browser that has been styled with CSS that's in the _theme.scss file, I'll see that it comes from _theme.scss in the source map.

This works fine if I am using ID and class selectors, but if I use an element selector the CSS rule gets placed in the wrong "file" in the sourcemap - it gets added to normalize.scss (where a foundation mixin appears - @mixin foundation-normalize()). But when I click on the normalize.scss sourcemap the rule is not actually there.

I decided to remove Foundation's includes and discovered if Foundation's mixins aren't included any element selector in _theme.scss will show that it's in _theme.scss in the sourcemap.

I am using browsersync and I'm proxying the WordPress local server.

Has anyone experienced this issue with sourcemaps when using element selectors and mixins?

If needed I can post the code in the webpack.config.js file a bit later.