[4.0] Template : css variables do not override bootstrap variables

[shim-sao]

Steps to reproduce the issue

Change some variables values in cassiopeia/scss/_variables.scss

I don't know if it is a bug or a choice, if so what is the utility of the cassiopeia/scss/_variables.scss

I attempt to create a template base on Cassiopeia and I found this "weirdness"

Custom css compilation with Gulp and other nodejs tools (minify, gz).

Expected result

Changing variables such as color, font size... in cassiopeia/scss/_variables.scss need to be reflect on the site.

Actual result

Nothing, because variables of bootstrap are loaded after those of the template.

System information (as much as possible)

All systems

Additional comments

Actually we have this in the cassiopeia/scss/template.scss ;

// Variables
@import "variables";

// Mixins
@import "mixin";

// Bootstrap
@import "../../../media/vendor/bootstrap/scss/variables";
@import "../../../media/vendor/bootstrap/scss/bootstrap";

// "Font Awesome 5 Free"
@import "../../../media/vendor/fontawesome-free/scss/fontawesome";
@import "../../../media/vendor/fontawesome-free/scss/solid";
@import "../../../media/vendor/fontawesome-free/scss/brands";

I think _variables.scss should be loaded after all media/vendor, no !?
or it will be overriden

// Mixins
@import "mixin";

// Here all Vendor imports

// Bootstrap
@import "../../../media/vendor/bootstrap/scss/variables";
@import "../../../media/vendor/bootstrap/scss/bootstrap";

// "Font Awesome 5 Free"
@import "../../../media/vendor/fontawesome-free/scss/fontawesome";
@import "../../../media/vendor/fontawesome-free/scss/solid";
@import "../../../media/vendor/fontawesome-free/scss/brands";

// Here all Templates imports

// Variables
@import "variables";

Maybe we can move mixin import too and/or also put these imports after build/media_source.

[richard67]

@shim-sao We use node.js to compile the scss, see description here: https://docs.joomla.org/J4.x:Setting_Up_Your_Local_Environment/en.

[shim-sao]

For me, the compilation is not the problem.

I will ask the question differently :
How variables in the templates.css can be used if they are replaced after (loaded before) by the variables of bootstrap ?

I think the response is (If I understand the design pattern) :
The variables in the variables.scss template file are simply duplicated from bootstrap (the ones that are the same).