CODEWITHSUNDEEP
csssassbootstrap-4
echo
echo

Reputation: 480

Where is My Webpage Loading its scss Files From?

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

Upvotes: 7

Views: 8376

Answers (3)

ktsangop
ktsangop

Reputation: 1173

When you use a CSS preprocessor as SASS, SCSS etc, combined with a build tool like Webpack, *.scss files will be compiled to *.css during build. This will probably not produce a 1 -> 1 file mapping, but might merge multiple *.scss files to a single *.css file.

Depending on your build tool configuration the *.css file of the output might be accompanied by a source *.map file

The source map is served by your dev web server (and production one if it's configured that way), and automatically downloaded by browsers if exists (browsers look for a source map file with the same name as each js, css etc file they download).

When you open Dev Tools on your browser, it will parse the source map file, and essentially re-create the development environment file structure, naming, syntax etc, so that you can easily debug your web application by looking back to your source code.

Long story short: *.scss files you see are "re-created" through *.map files on the browser.

Note that you can disable source maps on your build tool, or even just delete all *.map files from a project's folder, in order to see the actuall CSS code the browser parses.

Upvotes: 0

Binita Bharati
Binita Bharati

Reputation: 5898

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/

Upvotes: 1

patelarpan
patelarpan

Reputation: 7991

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

Upvotes: 2

Related Questions