I am currently using Coverage from Chrome Dev Tools in order to remove unused CSS from my files. My issue is that the file from Coverage is completely different from the one in my theme editor. I posted two photos with my colorize.scss file. Does anyone know how can I see or edit the formatted file that the Dev Tools is showing me?
This is due to SCSS files, Shopify theme contains files with extension .scss.liquid or .css.liquid and these files are compiled server-side and send as normal CSS.
So when you check it from the Dev tools or view page source these are compiled versions and not contained SCSS code same as theme files.
Note: Shopify now withdraw the support to the SCSS file with respect to better page load speed, but there is backward compatibility for the past old theme that have these SCSS files.
