Menu
When I use the 'styles' tab of the Google Chrome developer tools, it reports one of my styles as coming from the .scss file. How is this possible - I thought all .scss had to be flattened and read from a .css file:
530
If you can see your new CSS in the Styles pane, but your new CSS is crossed out, it means that there's some other CSS that is overriding your new CSS. In CSS terminology this concept is called Specificity. Chrome DevTools can help you find the old CSS that is causing your new CSS to not be applied.
In general, browsers do not know how to process SCSS features, such as functions, mixins, and nesting. We'll need to convert them to regular CSS files to run them in the browser.
Now you can edit your SCSS in the browser and when you save, Chrome will write those changes to the actual file. If you are watching your Sass for changes, the SCSS will get compiled and the CSS will be auto refreshed in your page including your changes.
When you compile your sass into css, you have an option to generate a source map file. At the end of the css file you will find a reference to a map file which will be located in the same folder location as your css, with a .map extension.
This is used by chrome inspector to help development. You can turn it off in chrome inspector or just remove the reference to the source map from the css or remove the option to generate the source map in the first place.
If you just want chrome to show the css and are happy to keep the source map file you can just turn off the option. To turn off the option in Chrome Developer Tools, open up inspector and go to Settings. Look in the Sources category within the Preferences section, and untick "Enable css source maps"
107
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
