Skip to content

Unable to override default colors from extended Sass #952

Description

@msecret

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.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions