Theming with SCSS

[jcenlo]

Hi, i have a problem when i try to edit the theme of grapes to change colors with this code

// Put your variables before the GrapesJS style import

// Palette variables
$primaryColor: #444;
$secondaryColor: #ddd;
$tertiaryColor: #804f7b;
$quaternaryColor: #d278c9;

// ...

@import "grapesjs/src/styles/scss/main.scss";

i get this error

Compiled with problems:X

ERROR in ./src/editor/config/editor.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/editor/config/editor.scss)

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "...font-size: math": expected expression (e.g. 1px, bold), was ".div($imageCompDim,"
        on line 354 of node_modules/grapesjs/src/styles/scss/main.scss
        from line 84 of src/editor/config/editor.scss
>> 	font-size: math.div($imageCompDim, 3);

   ----------------^

[artf]

I'm not sure but it might be related to your sass version (the math helper is imported via @use 'sass:math';).
Anyway, I'll probably remove that rule from styles as it's not used anymore.