Where is My Webpage Loading its scss Files From?

3
votes

So I'm working on a web project and I started with an HTML/CSS template created by someone else. It appears to use bootstrap which I don't know much about.

Upon using chrome developer tools I noticed that some of the css styles being applied were coming from scss files which I can not find on my system. I'm wondering where do these files exist?

The screenshots are from

  1. Chrome dev tools that tells me the path to the scss file that is applying styles

  2. That same path on my system where the scss folder was stated to be does not appear to exist. Notice that I'm in the "vendor" folder but there is no scss folder as dev tools shows there to be.

Can someone explain to me where the browser is loading these scss files from? I've tried having Windows display hidden files and folders and that doesn't make a difference. Thanks!

Path to scss file via Chrome Dev Tools: Path to scss file via Chrome Dev Tools

That same path on my file system That same path on my file system

2
csssassbootstrap-4
it looks like a previous developer used a CSS preprocessor (SASS) you are seeing it's compiled output. check your source files for external includes invoking it. your screenshots aren't helpful as it's being invoked from your markup, or js files. – fred randall
Are you find .map file in your CSS folder? – patelarpan
Can you share your bootstrap folder screenshot – patelarpan

2 Answers

2
votes

It happened because of scss sourcemap. It generated when compile scss file to CSS, for easy debugging.

I assume you are using development version of bootstrap. If you using production version it's not happen.

You can find more information about this here

0
votes

There may be files with .map extension (called as the source map in scss world) in your project path. These .map files refer to the path of the .scss files that were used during development to create .css files. So, even though there are no physical .scss files present in your context path; and your html file refers to the compiled .css file, Chrome debugger would still show the original .scss file from which the .css got compiled. If you require the Chrome debugger to show the actual .css file name, then you could delete the .map file temporarily. This suggestion is considering you would like to see the .css file name instead of the non-existent .scss files. You could also check this link to understand more about working with .scss files in Chrome debugger : https://www.sitepoint.com/using-source-maps-debug-sass-chrome/