The Australian Government coat of Arms

Communities of practice

Communities of practice

Component styles overriding SCSS (style variables not working)

Hi there,

I’m using the aus gov design system and have reset the color SCSS variables to override the defaults.
The problem I am facing is that the component styles.css file is taking precedence, however it is not updating when I change the SCSS color variables. See screenshot

Here you can see that the styles.css file takes precedence, and the _module.scss file which actually has the variables doesn’t get shown. So the issue is that the styles.css file is not updated to the latest color change. My global-style.scss looks like this:

// vars look like this
// Dark theme overrides
$AU-colordark-foreground-text: #ffffff !default;
$AU-colordark-foreground-action: #ffffff !default;
$AU-colordark-foreground-focus: rgba(#13e241, 0.3) !default;
$AU-colordark-background: #a41946 !default;

// Light theme overrides
$AU-color-foreground-text: #313131 !default;
$AU-color-foreground-action: #a41946 !default;
$AU-color-foreground-focus: #9263de !default;
$AU-color-background: #ffffff !default;

// 1. Configuration and helpers
@import './abstracts/variables'; // aus gov vars here
@import './abstracts/mixins.scss';
@import './abstracts/normalize';
@import './abstracts/helpers.scss';
@import '../../pancake/sass/pancake.scss';

Am I missing something, I run npx pancake and it generates fresh pancake files, but the styles.css files of the components in the node_modules do not get updates with the latest Sass variables.

Any help would be greatly appreciated. Thank you

Sounds like it might be related to this.