css3 - Why only css files are displayed while inspecting an element? -


first when used inspect element in chrome browser during web development, used display exact scss (css pre-processor)file in styles present. helpful. when inspect element showing computed css file. can't figure out has happened browser. should settings changed? kindly suggest solution.

you're missing source map file (.map)

from chrome devtools docs:

for preprocessors support css source maps, devtools lets live-edit preprocessor source files in sources panel, , view results without having leave devtools or refresh page. when inspect element styles provided generated css file, elements panel displays link original source file, not generated .css file.

check if chrome has featured enabled:

css source maps enabled default. can choose enable automatic reloading of generated css files.

to enable css source maps , css reload:

  1. open devtools settings , click general.

  2. turn on enable css source maps , auto-reload generated css.

most modern ides support scss generate map files, check ide settings make sure files created each time compile scss code.

style.scss compiles into: |_ style.css |_ style.css.map 

Comments

Popular posts from this blog

wordpress - (T_ENDFOREACH) php error -

Export Excel workseet into txt file using vba - (text and numbers with formulas) -

Using django-mptt to get only the categories that have items -