Sass Variables Not Parsing Correctly - Undefined Variable: "$Ct-White"

SASS variables not parsing correctly - Undefined variable: $ct-white

You're importing colors after layout , so the variables you define in colors are not available for layout. You could simply invert the order of those two lines. In SASS, import order matters.

Not sure if I need to re-import scss files

To use a variable or a function on a another partial file, you need import first the file contain this variable/function.

Like that:

/* Libs */
@import "bower_components/modular-scale/stylesheets/modular-scale";
@import "bower_components/normalize-scss/normalize";

/* Pages */
@import"pages/about";
@import"pages/contact";
@import"pages/home";
@import"pages/projects";

/* Partails */
@import "partials/gridmixins";
@import "partials/mixins";
@import "partials/colors";
@import "partials/typography";

False positive undefined variable error when compiling SCSS

You're generating files that don't need to be generated.

• screen.scss -> screen.css
• base.scss -> base.css
• catalog.scss -> catalog.css

The catalog file is being compiled on its own. Since it is not importing base.scss, the variables are not set. Your screen.scss file generates as you expect because it is importing all of the necessary information.

What you want to do is rename your partials to begin with an underscore to prevent them from being compiled on their own:

• screen.scss -> screen.css
• _base.scss (not compiled)
• _catalog.scss (not compiled)

Sass: @use makes error, undefined variable

The problem might be that @use adds a namespace to your variables – in order to continue using variables like you did before (as color: $variable instead of color: namespace.$variable) you need to import it like so:

@use '@carbon/colors/scss/colors' as *;

according to the official docs.

Can't use SASS variables in Angular from global file, despite other styles working

The error is due to wrong syntax as pointed out. It needs to reference the source of the colors.

background-color: colors.$test-color;

Furthermore, the import is required but needs to be done by reference to the module and not to the file.

@use "colors";

In a wholesome code base, one should put the following in the file src\colors.scss.

$test-color: pink;

Then you could use it like this.

@use "colors";
div{ background-color: colors.$test-color; }

In the config file angular.json, the following needs to be set.

"styles": { ... },
"stylePreprocessorOptions": { "includePaths": [ "src" ] },
"scripts": { ... },

Also, it's should be noted that files prefixed by an underscore are subject to a different processing and as such, _colors.scss is preferred. While it's valid and working to place the auxiliary files directly in /src (as is the case with styles.scss, the convention dictates to place them in /src/assets/styles, altering the pre-processor's options as below.

"stylePreprocessorOptions": { "includePaths": [ "src/asses/styles" ] }

---

Related Topics