See also #21328 where the files were moved to /build/

re #21328 Missed that one.
Looks like the call to the above mentioned files has been left behind during this huge makeover - 731 files modified.

IMO not an issue. If we ship the template SCSS files, we have to ship basically every SCSS resource from every external vendor. AFAIK we aren't including a PHP based SCSS compiler in 4.0 (and it'd be a mistake if we did as it has been proven the compiler used for LESS in 3.x is fatally flawed, I personally won't support inclusion of a SCSS compiler unless it can be proven that 100% of the time on every build the end result is the same as using NPM based tooling), so to do SCSS related changes and re-compile you're going to need an NPM environment and I'd suggest you would be able to download the needed files from this repo for the core templates and adjust the reference paths as needed.

So users that want to change scss in installed "core" templates or clones and want to recompile have to use console npm in the future instead of just starting the compiler they usually use, pointing on a single scss file they want to compile. Is that realistic? For programmers maybe.

It would be consequent then to remove the dependent /scss/ folders in "core" templates, too, after build, if they shall be useless for normal users in the future.

Long and short custom.css files are going to be a bigger thing I would suggest. Unless you're aware of some pretty darn good LESS/SCSS compilers in PHP that can do the things we're doing with NPM (and this goes beyond just SCSS to CSS, there are things like autoprefixer to do browser specific CSS tweaks without having to explicitly write them in the SCSS source files at play too).

This is where core having "good" template options in the UI and "good" use of things like CSS variables is going to be important.

I wouldn't say there's anyone trying to make it impossible for "normal users" to do things. But at the same time, there are things that just aren't reliable to offer in a PHP application without limiting what tools can be used. SCSS compiling is one of those things (I say LESS compiling is too but people blissfully use that since I don't think it's clear just how bad those results are in some cases). The only fix for that is to not use a compiler at all and write everything in hand-maintained CSS.

@mbabker
thanks for your detailed explanation. It answers my 2nd question. No core sass compiling in the works.
Node-Sass NPM package will do the job for me.
And yes, custom.css or user.css will become really handy.

@ReLater
I do agree with your last post.

Nevertheless, in the Nightly Builds distribution, in cassiopeia's template.scss,

// B/C for Icomoon
@import "../../../build/media/system/scss/icomoon";

// Alert
@import "../../../build/media/system/scss/jalert";

(In atum's template.scss, only the second one)

call files that are supposedly in a folder /build/ that doesn't exist in Nightly Builds.
But does in github distribution, no prob.
I guess I'll have to make a pull request.

Anyhow, I had questions about sass/scss in joomla 4 which have been answered.
Thank you both.

The only fix for that is to not use a compiler at all and write everything in hand-maintained CSS.

And loose all the capabilities of scss ?
Not sure to understand, so far, user.css don’t even work, how should I put my custom code ?

user.css don’t even work, how should I put my custom code

Create a file cassiopeia/css/user.css and put your overruling CSS in it.
In index.php it will be included via
$wa->enableAsset('template.cassiopeia.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'));
that uses configuration file joomla.asset.json inside template folder.

If it doesn't work for you and you can't find user.css inside your HTML source code, please open a new issue.

And loose all the capabilities of scss ?

Only for the "core templates" and only if you don't use npm and so on. If you use it you can re-establish the folders/files, that are missing after installation/after build process.

Then you only have to modify the build scripts a bit and after some hours ;-) of nagging you can use the "core scss files" and compilation routines for your own template, too.

Joking apart:

Normally one should use a clone/copy of the "core templates" if you want more than just user.css. There you can change everything for your own requirements. Add files, change paths in scss and so on.

If you use standard scss of a Bootstrap 4 package or just your own common scss the compilation works like expected with lots of compilers.

Thanks “ReLater” with your explanation I start to see the light...

If I understand well Joomla 4 will not have a compiler...
RocketTheme is using Leafo SCSS Compiler, I never have a problem with it. I will try.

I just test “user.css” and it is not working
• user.css is in the css folder
• $wa->enableAsset('template.cassiopeia.' . ($this->direction === 'rtl' ? 'rtf' : 'ltd')); is in the index.php
• joomla.asset.json have the user.css entry

I just test “user.css” and it is not working

Do you use a current Nightly Build of Joomla 4? My Joomla 4 is completely outdated. I can't test it.

If it doesn't work for you and you can't find user.css inside your HTML source code, please open a new issue.

BTW: I've tested pure BS4-SCSS with https://extensions.joomla.org/extension/scss-compiler/ (leafo) and it worked. But I don't remeber if I tested the plugin with Joomla 4 without PHP changes inside plugin code.

I reinstall Joomla_4.0.0-alpha6-dev-Development-Full_Package like 5 days ago, I will try to update/reinstall again

Just install new code from today, still not getting user.css to do anything???

Curiously, it is loading with the other css

/joomla4/media/mod_languages/css/template.min.css?7ce45014c73b7b02236d11a310d7deb8

/joomla4/media/vendor/joomla-custom-elements/css/joomla-alert.min.css?7ce45014c73b7b02236d11a310d7deb8

/joomla4/templates/cassiopeia/css/template.min.css?7ce45014c73b7b02236d11a310d7deb8

/joomla4/templates/cassiopeia/css/user.css?7ce45014c73b7b02236d11a310d7deb8

/joomla4/media/vendor/font-awesome/css/font-awesome.min.css?4.7.0

https://fonts.googleapis.com/css?family=Fira+Sans:400

Not sure what the number after ( 7ce45014c73b7b02236d11a310d7deb8 ) mean ?

I have a div id “logo-grad” in a custom module and this css that IS NOT APPEARING in Firefox Dev when I select the div “logo-graf”????

#logo-graf img { float: left !important; margin: -30px 0 0 100px !important; position: absolute !important; width: 140px !important; }

logo-grad or logo-graf ?

My bad “user.css” work perfectly if you don’t have error in your file ... Oops - Now I only have to work to have a custom scss file.

One thing I need clarity on is the presence of a css folder and the need to add our own compiler.

How the SCSS files in the SCSS folder in Cassiopeia are compiled ?