0

We use webpack to compile some sass file into CSS hier is fragment of SASS file:

.#{$prefix}title {
    color: $title-color;
}

Which is compiled into following CSS:

.x-titlebar .x-title {
    color: #fff;
    color: var(--base-foreground-color);
}

And we have some strange behavior in the components. Removing first rule with color constant - doesn't work too.

But if we remove the second color rule with variable - it works fine.

We've tested it with last Chrome 93.x and last Edge 93.x version - equal result.

We use sass-loader@10.2.0 & node-sass@6.0.1 newer version doesn't compatible with ExtReact 7.4.0

Is there any possibility to tell sass-loader do not put the rule with variable into compiled CSS?

Edited: I've found the main cause. The CSS are compiled by the sencha-fashion package.

In the project folder there is node_modules\@sencha\cmd\dist\js\node_modules\fashion\defaults.json file. In the file is following section

"cssVars": {
    "enable": true
}

After I've switched it to false - all variable rules disappears and it solves my problem. The file is part of node_modules @sencha\cmd and is called indirectly via @sencha/ext-webpack-plugin and will be lost if I clean and rebuild the project.

The question is now - how to configure this using @sencha/ext-webpack-plugin?

Dimitrij
  • 21
  • 4
  • what do you mean with `doesn't work`? If you have two CSS rules and remove the first one, it won't have any effect since it takes the last one. Maybe your variable is just set to the wrong value? – cloned Sep 09 '21 at 11:24
  • I mean, that after removing constant color rule I still get strange component behavior. I've investigated further and found, that the CSS files are generated not by webpack script but by underlined sencha cmd. – Dimitrij Sep 09 '21 at 17:24

0 Answers0