Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

adding SCSS to helix ultimate

Featured Lock Resolved Issue
What is the best way to add scss to the new helix ultimate?
We have css area int he template for custom, and we can add a custom.css file in the css folder which is loaded last if we have a fair bit of css.
But if we want to add scss can we add that to the custom scss file or is there another path we should use?

10 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
1) add file into /css/ folder of template
2) then in <head> section (from setting) add

<link href="/templates/shaper_helixultimate/css/custom.scss" rel="stylesheet" type="text/css" />


peace of cake. All clear ? if yes click " Accept As Answer "
All of the answer is great apart from the disposition of the cake, I doubt if about to be eaten it will be at peace, but happy to have a piece of it even if it's not a peaceful cake ;)
I did as you suggested and it does show the file as one would expect but the scss is as is its not compiled into css and so although its there its not being used by the page.
I have the setting in advanced for scss switched off so its not compressed
In the chrome console I get this :-

Resource interpreted as Stylesheet but transferred with MIME type text/plain: "https://mysite.co.uk/templates/shaper_helixultimate/css/custom.scss"

Should it not be compiled first and are we needing to compile locally then upload tot he file (if thats the case we can just add it into custom.css!)

Paul Frankowski - Staff

More than a month ago #Permalink
It's not recompiled file, because this file was added manually, it's not part of Helix.
I shown only method to insert file. You have to read more in internet how to use scss files.
Or customize Helix Ultimate deeper, sorry beyond support.
Ahh ok I see, I saw you were using scss and assumed you were letting us add to a file that would be compiled with your scss.
I know how to add a file and if we are compiling it locally then we may as well just add it to the custom.css file and for that we dont have to add a file link in the head so its not and ideal solution.
Shame, I had hoped we could use scss in the template without modifying
Hi Paul
There is a way
You can add a custom scss file in the scss folder. This will not be prepossessed. So it heeds to be imported into one that is.
So I added a line
@import 'custom'; Note its not custom .scss even thought thats the name of the file

Now you can add what ever scss to your custom file and its processed and added as css to the helix ultimate template.

Can I suggest you add the @import 'custom'; in the last scss file you load and place it at the bottom. It will not impede performance if its empty and will stop the updates overwriting the import line every time .
This should greatly help any developers and keeps it all in the right place. They just make the file in the scss folder (don't add it in the distro otherwise it will overwrite with the blank one) and 'Bobs your Uncle'

pepperstreet

More than a month ago #Permalink
(Following…)
Can you guys add custom.scss as last inside master.scss with @import into helix please. This way it doesn't override on helix update and everyone can use scss. As long as you include a script that checks if there is already a custom.scss file on update or install so it will never be updated.

Paul Frankowski - Staff

2 weeks ago #Permalink
I think it's good idea, I will ask.
Following too


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 217
Sifat

Sifat

Total Accepted Answers: 133
Toufiq

Toufiq

Total Accepted Answers: 44
Archange Consulting

Archange Consulting

Total Accepted Answers: 2
XO

Xavier Ogay

Total Accepted Answers: 1

100+

Templates

200,000+

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us