Extrange paths for CSS source files

Good morning. Finally, I’m starting with Sage 9! My first question:

CSS maps show me wrong paths for CSS source files. When I try to locate the CSS soruce files with Chrome inspector I’m getting this extrange path:

my-theme-dir/resources/assets/styles/node_modules/bootstrap/scss/_reboot.scss

Obviously, there is no node_modules directory inside assets and this is a installation of sage with no CSS framework. Also, these CSS selectors live in _global.scss.

What is happening with CSS maps? Thank you.

I think this is a bug with css-loader.

Could be this issue?

The node_modules directory it is referring to is the one in your theme root directory. Check if bootstrap is installed there, if not then I do not know why it is referring to a bootstrap file. That a { selector from the picture is also added in bootstraps _reboot.scss so it looks like it might still be included.

Thank you for the answer!

Yes, Bootstarp is inside root node_modules. But this is a Sage installation without Bootstrap and without any other CSS framework. Is the Bootstrap CSS reset (_reboot.css) included regardless of whether Bootstrap is installed?

No, this a { selector belongs to _global.scss:

27

Maybe, can be that bug you mention. Is not possible for me to know it for sure (I’m not a developer and these are my first steps with webpack and Sage 9. All seems very dark yet. Too much ignorance, I’m afraid :sweat_smile:). Anyway, if that is the case, why it is affecting only to me?

Ok! I forgot that this Sage installation was done cloning git repo (in order to work with subtrees), not with the installer. So, Bootstrap was not removed. I’ll try the installer way.

[EDIT] Installing Sage from composer installer works without map errors.

Has anybody else encountered the same issue ? I’ve installed sage via composer, but I have the same problem as aitor described.

I’d like to try chrome web inspector live edit (filesystem) feature, but because of this bug, I can’t.

Is there any solution ?