Majority of the core files included in Astroid framework get’s overwritten when you get an update for your template. The best way to write custom CSS/SCSS is by writing it into your custom files that won’t be overwritten on the next update.
Adding custom CSS/SCSS files is a piece of cake.
For adding a custom CSS file create a blank file in the following path: JOOMLA_ROOT/templates/YOUR_TEMPLATE/css/custom.css and that’s it, you have your custom CSS file that will be included the template.
For adding a custom SCSS file create a blank file at JOOMLA_ROOT/templates/YOUR_TEMPLATE/scss/custom/custom.scss and that’s it, you have your custom SCSS file that will be included the template. please note that for SCSS, you’ll have to create the custom folder as well.
Wasn’t that simple!!!
Caching notes:
Please note that you have to clear astroid cache in order for your custom.scss file changes to be reflected in the browser Or you can just enable Debug in Astroid Plugin settings and it will render the SCSS everytime (thus slows down the performance a little bit).
Custom.css file is NOT cached by Astroid and is served live from the web server, however you browser may cache a copy of the file or if you are using a CDN service (i.e. CloudFlare or AmazonCloudfront), you may need to clear server cache or turn it off temporary while you are actively making modifications to the css file.