How to connect your SCSS?

[kosh2323]

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.

[ceford]

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]

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]

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.

[ceford]

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

[kosh2323]

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]

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

[kosh2323]

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

For VSCode I use Live SASS Compiler

[ghazal]

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]

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]

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]

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]

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]

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.