How to connect your SCSS?

Everything to do with Joomla! 4.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
kosh2323
Joomla! Apprentice
Joomla! Apprentice
Posts: 42
Joined: Mon Aug 22, 2022 3:01 pm

How to connect your SCSS?

Post by kosh2323 » Sun Dec 04, 2022 2:23 pm

Hello everyone. I want to connect my own style file in CSS format, as described here,

https://docs.joomla.org/J4.x:SCSS_and_Sass

simply through import in the template.scss file. The Cassiopeia template is by default, if I'm not mistaken, it already has a compiler at the kernel level, but I don't know how to do it better. Maybe you need some kind of third-party plugin? Tell me who knows.

User avatar
ceford
Joomla! Ace
Joomla! Ace
Posts: 1496
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: How to connect your SCSS?

Post by ceford » Mon Dec 05, 2022 11:48 am

I don't think you should try to incorporate anything into the cassiopeia template.css files. You could put your own styles in user.css or you could build your own style sheet and use the Web Asset manager to load it.

kosh2323
Joomla! Apprentice
Joomla! Apprentice
Posts: 42
Joined: Mon Aug 22, 2022 3:01 pm

Re: How to connect your SCSS?

Post by kosh2323 » Mon Dec 05, 2022 12:44 pm

Maybe developers will include this feature in future versions so that styles are compiled immediately, as is done in some frameworks, such as Gantry, Astroid, etc. Now, as I understand it, there is simply no such opportunity.

ghazal
Joomla! Explorer
Joomla! Explorer
Posts: 324
Joined: Fri Aug 19, 2005 12:12 pm
Location: Out of my mind ...sometimes

Re: How to connect your SCSS?

Post by ghazal » Tue Dec 06, 2022 11:47 am

Try this SCSS compiler:
https://lomart.fr/extensions/scss-compiler

Or,
dig deep into the "command line" world, a feature coming from Linux, a "text interface to your computer", but can be used with a Mac (with Terminal), or Windows (with Putty).
More info:
J4.x:SCSS and Sass - Joomla! Documentation
https://docs.joomla.org/J4.x:SCSS_and_S ... ompiler.3F

Once everything is settled, with a single command:

Code: Select all

npm run build:css
All your new styles corrected in the relevant .scss files will be modified in the corresponding css files.

But it is quite a process if you are not familiar with this.

User avatar
ceford
Joomla! Ace
Joomla! Ace
Posts: 1496
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: How to connect your SCSS?

Post by ceford » Tue Dec 06, 2022 12:02 pm

I used to use sass and yuicompressor but not for a couple of years since I moved on from J3 to J4.

kosh2323
Joomla! Apprentice
Joomla! Apprentice
Posts: 42
Joined: Mon Aug 22, 2022 3:01 pm

Re: How to connect your SCSS?

Post by kosh2323 » Wed Dec 07, 2022 7:51 am

ghazal wrote:
Tue Dec 06, 2022 11:47 am
Try this SCSS compiler:
https://lomart.fr/extensions/scss-compiler

Or,
dig deep into the "command line" world, a feature coming from Linux, a "text interface to your computer", but can be used with a Mac (with Terminal), or Windows (with Putty).
More info:
J4.x:SCSS and Sass - Joomla! Documentation
https://docs.joomla.org/J4.x:SCSS_and_S ... ompiler.3F

Once everything is settled, with a single command:

Code: Select all

npm run build:css
All your new styles corrected in the relevant .scss files will be modified in the corresponding css files.

But it is quite a process if you are not familiar with this.
Hi, thanks for participating. This option does not work. I do everything according to the instructions, but it says that it does not work with Cassiopeia, although they offer the option to simply specify 2 folders - from where and where. There's probably still a compiler needed, although I don't understand if there is a compiler at the Joomla kernel level, why it can't be used, as it is done, for example in Gantry. The task is to make compilation happen immediately. That is, there is a SCSS file, you write your styles into it, and compilation takes place on the fly. And so there are no problems to compile on the local computer...

ghazal
Joomla! Explorer
Joomla! Explorer
Posts: 324
Joined: Fri Aug 19, 2005 12:12 pm
Location: Out of my mind ...sometimes

Re: How to connect your SCSS?

Post by ghazal » Wed Dec 07, 2022 8:06 am

@kosh2323
Which one? The extension or the "command line" article?

kosh2323
Joomla! Apprentice
Joomla! Apprentice
Posts: 42
Joined: Mon Aug 22, 2022 3:01 pm

Re: How to connect your SCSS?

Post by kosh2323 » Wed Dec 07, 2022 9:02 am

ghazal wrote:
Wed Dec 07, 2022 8:06 am
@kosh2323
Which one? The extension or the "command line" article?
For VSCode I use Live SASS Compiler

ghazal
Joomla! Explorer
Joomla! Explorer
Posts: 324
Joined: Fri Aug 19, 2005 12:12 pm
Location: Out of my mind ...sometimes

Re: How to connect your SCSS?

Post by ghazal » Wed Dec 07, 2022 10:55 am

As it is very often the case, it could be a question of settings and paths as demonstrated in this video:
Sass Compiler NOT Working in Visual Studio Code - [youtube]
https://www.[youtube].com/watch?v=xJKiuovQcPA

kosh2323
Joomla! Apprentice
Joomla! Apprentice
Posts: 42
Joined: Mon Aug 22, 2022 3:01 pm

Re: How to connect your SCSS?

Post by kosh2323 » Wed Dec 07, 2022 12:41 pm

Apparently that's not how I explained it, with SASS compilation, I have no problems in VS Code using LIVE SASS Compiler, and the Joomla plugin does not work. The question is that compilation should take place in live mode at the Joomla core level.

ghazal
Joomla! Explorer
Joomla! Explorer
Posts: 324
Joined: Fri Aug 19, 2005 12:12 pm
Location: Out of my mind ...sometimes

Re: How to connect your SCSS?

Post by ghazal » Sun Dec 11, 2022 12:58 pm

I have not given up on trying to explain how to use joomla core system to update scss files.
I gave you this link :
https://docs.joomla.org/J4.x:SCSS_and_Sass

without checking it first and I am sorry. It's full of errors beginning with this:
The core .scss files are in different directories. Specifically, these are these files:

templates/cassiopeia/scss/template.scss
administrator/templates/atum/scss/bootstrap.scss
etc...
when these files have been moved to media/templates/... for a long time already.

But I want to post a report in Joomla Github Issues before replying, to confirm my suspicions with joomla devs.

kosh2323
Joomla! Apprentice
Joomla! Apprentice
Posts: 42
Joined: Mon Aug 22, 2022 3:01 pm

Re: How to connect your SCSS?

Post by kosh2323 » Mon Dec 12, 2022 6:37 am

Hi, the thing is that the versions are updated and the paths are changing, and the documentation is lagging behind. And besides, to use it, they are becoming more complicated, and there are no clear step-by-step instructions. If, for example, you have ever used Gantry, there is a SCSS file in which you write your styles, and that's it, compilation to CSS happens "on the fly". Here it is necessary to look for some workarounds.....

ghazal
Joomla! Explorer
Joomla! Explorer
Posts: 324
Joined: Fri Aug 19, 2005 12:12 pm
Location: Out of my mind ...sometimes

Re: How to connect your SCSS?

Post by ghazal » Wed Dec 21, 2022 11:07 am

Sorry for the delay, I encountered some roadblocks while testing because Joomla is a WIP and I had to find where the issue was.

I assume you are working with Windows, right?
NB : this is a tut for a local testing

As I don't know your working habits, let's dive into the prerequisites from the beginning.

1- Sign in Github, you'll need it at some point.

2- Installation of NodeJS and NPM is mandatory
* With VBCode
Build Node.js Apps with Visual Studio Code
https://code.visualstudio.com/docs/node ... s-tutorial

* Outside of VBCode
- You'll need a Terminal
microsoft/terminal: The new Windows Terminal and the original Windows console host, all in the same place!
https://github.com/microsoft/terminal
- How to Install Node.js and npm on Windows, macOS, and Linux
https://kinsta.com/blog/how-to-install-node-js/

3- Download Joomla last repository, 4.2-dev
https://github.com/joomla/joomla-cms
Green button with "Code"
Download ZIP

4 - Deploy the package in your htdocs
If you try http://localhost/4.2-dev as is, it won't work
Find the absolute path to 4.2-dev folder in htdocs
Run this command in Terminal, or VBCode equivalent:

Code: Select all

cd absolute/path/to/htdocs/4.2-dev
Then, you'll be within this folder in the Terminal
NB: there are many tuts around this.
Then, run this command:

Code: Select all

composer install
the second one

Code: Select all

npm ci
At this point, you'll be able to complete the installation of joomla the regular way
...if everything has been going smoothly.
But it could be a rocky road.

My next post will be about your original question, SCSS and Sass.

kosh2323
Joomla! Apprentice
Joomla! Apprentice
Posts: 42
Joined: Mon Aug 22, 2022 3:01 pm

Re: How to connect your SCSS?

Post by kosh2323 » Thu Dec 22, 2022 6:34 am

Hello, ghazal. Thank you for the detailed answer. But the question is not to compile SCSS locally into CSS. There are quite a lot of extensions for both Win and VSCode for this. The question is, here you have made a site locally or directly on hosting, and you want to change styles, open your user.scss, change something in it, and Joomla converts and writes your styles to user.css "on the fly". Joomla developers have provided such a compiler at the kernel level. But the user does not have the opportunity to use it, as for example it is done in Astroid or Gantry.


Post Reply

Return to “Templates for Joomla! 4.x”