William Hurst21,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.