Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
William Hurst
24,537 PointsWebpack 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.