How to convert SCSS to CSS in Narrative Theme

Go to online store → actions → edit code, locate theme.liquid

Within theme.liquid, look for something similar to this: {{ ‘theme.scss.css’ | asset_url | stylesheet_tag }} …don’t touch it for now, just keep theme.liquid open.

Now go to your website (the front end…what your customers see) and view page source. Locate the reference to theme.css. Open it and copy and paste the contents of this file into notepad (or similar) and save it as custom_style.css.

Upload custom_style.css as an asset. This can be done on the same page where you located theme.liquid. On the left pain, scroll down to assets and click add new asset.

Go back to theme.liquid and update it to include your rendered css instead of the scss. Change {{ ‘theme.scss.css’ | asset_url | stylesheet_tag }} to {{ ‘custom_style.css’ | asset_url | stylesheet_tag }}

Save it.

3 Likes