In https://github.com/18F/cg-style, I have a scss file that has a file to override certain variables from the styleguide like color:
https://github.com/18F/cg-style/blob/master/src/css/override_vars.scss#L3
$color-primary: #1F2B38;
$color-primary-darker: #2C3E50;
$color-primary-darkest: #1F2C38;
I then import the standards and include this file after:
https://github.com/18F/cg-style/blob/master/css/cg_style.scss#L4
@import "../node_modules/uswds/assets/_scss/all.scss";
@import "../src/css/override_vars.scss";
But when I use the CSS from cg-style, the colors of the USWDS components are not modified. For instance, the button color is still #0071bc. This includes if I import the overrides before or after the standards.
This is happening because the standards are setting all variables without !default in the variables.scss file. If this wasn't the case, and only the defaults.scss file was used, I would be able to import my override_vars.scss file and it would correctly be overriden.
In https://github.com/18F/cg-style, I have a scss file that has a file to override certain variables from the styleguide like color:
https://github.com/18F/cg-style/blob/master/src/css/override_vars.scss#L3
I then import the standards and include this file after:
https://github.com/18F/cg-style/blob/master/css/cg_style.scss#L4
But when I use the CSS from cg-style, the colors of the USWDS components are not modified. For instance, the button color is still
#0071bc. This includes if I import the overrides before or after the standards.This is happening because the standards are setting all variables without
!defaultin thevariables.scssfile. If this wasn't the case, and only thedefaults.scssfile was used, I would be able to import my override_vars.scss file and it would correctly be overriden.