Source Map & Webpack file path issues

[josialoos]

I have this issue where browsersync pretends a certain scss element to be in a completely wrong file.

I have two files:
_menu.scss
_desktopmenu.scss

both are @imported in main.scss

In Chrome dev-tools elements from _desktopmenu.scss are listed as elements from _menu.scss. The two files are in no way connected to each other. This is very strange and makes finding the origin of an element really hard.

I cleared the browser cache and .cache-loader of course, with no effect.

Does anyone have an explanation for this?

[josialoos]

I figured this out by myself. The magical answer is: source maps caching. (Didn’t even know this exists.)

I needed to go to the “Network”-tab in developer tools and check the box for “disable cache”, otherwise the dev tools will get messed up by time when I move code from one scss-file to another. the code will be compiled and updated correctly, but for some reason the source maps will not be updated properly.

now everything works fine.

This is not a particular roots.io-issue, but I would appreciate keeping this thread, as this topic likely will up again.

[josialoos]

I have to take this back. After short time I realised, that in fact disabling the source map caching made some changes, but still there is a problem with the source maps, as you can see on the screenshots:

the right code is being directed to the wrong files. main.css and main.css.map file look correct even if I inspect them in chrome. But both in Firefox and in Chrome are displaying the paths wrong as shown above. This is so weird …

[josialoos]

talking to myself is so cool …

[josialoos]

Found out, that this issue only occurs, when two different files are putting out elements for the very same path. as soon as I change the path they get directed to the right .scss source file.

Also I think the problem has to do something with webpack. As yarn build:production and yarn build produce perfectly correct main.css and main.css.map files, I guess there is no other explanation then webpack somehow misshandling multiple files, that add up on the very same css elements.

Has anybode else had issues like this or come across a solution or any other idea what the problem is? I can’t believe I’m the only one having this issue …

[josialoos]

Having even more issues now … css classes aren’t being overwritten correctly.

example:
#desktopmenu #topmenu {
some: code;
}

@media (max-width: 800px) {
other: code;
}

The code in the media query is not overwriting the base code, though it is underneath in the same file.

Still hoping for someone to answer me on this.