Error: $color: "var(--bs-primary-rgb)" is not a color for `rgba' in v5.1.0 #34693

harnishdesign · 2021-08-05T13:14:14Z

I try to compile in latest v5.1.0 So, I get error as below. have i wrong anything?

Error: $color: "var(--bs-primary-rgb)" is not a color for `rgba'
on line 41 of C:/xampp/htdocs/myproject/sass/bootstrap/_functions.scss
from line 2 of C:\xampp\htdocs\myproject\sass\stylesheet.scss

My stylesheet.scss

@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/vendor/rfs";

// Initialize
@import "variables";
@import "mixins";

// Core CSS
@import "reset";
@import "helpers";
@import "layouts";

// Content Blocks
@import "elements";
@import "social-icons";
@import "extras";

The text was updated successfully, but these errors were encountered:

diyadin2 · 2021-08-05T13:44:48Z

i have the same problem

morrow95 · 2021-08-05T15:18:39Z

Same here

mdo · 2021-08-05T16:28:59Z

Can you provide a reduced test case here? We use these RGB values to form RGBA colors for greater customization. It's not immediately clear here from your report what function or context is failing.

morrow95 · 2021-08-05T17:04:55Z

Line 41 from _functions.scss is :

40 : @function rgba-css-var($identifier, $target) {
41 :  @return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
42 : }

The original poster is doing the same thing as I am. Importing the following in a custom scss file :

@import "bootstrap-5.1.0/scss/functions";
@import "bootstrap-5.1.0/scss/variables";
@import "bootstrap-5.1.0/scss/mixins";

so the variables, mixins, etc can be used in that file. No issues with prior versions... only started happening when I tried BS 5.1.0.

mdo · 2021-08-05T18:00:03Z

I'm not seeing issues on my end when compiling bootstrap.scss with only those three imports, or in the bootstrap-npm-starter project when importing those into a custom stylesheet.

Anyone have a reduced test case to show the problem?

diyadin2 · 2021-08-05T18:19:15Z

Error while compiling scss file with Koala program.

diyadin2 · 2021-08-05T18:27:48Z

ffoodd · 2021-08-05T18:33:08Z

@mdo Could be some compilers compatibility issue again, regarding rgba() that could be both a Sass function and a CSS function.

Sass (Ruby but maybe Libsass too) would throw an error since it needs a color value.

MaxxDelusional · 2021-08-05T20:08:39Z

My sass is compiling, but I get an error in the Edge dev tools, and the css class is not working.

Invalid Property Value:
background-color: get-function(rgba-css-var)("primary", "bg") !important

mdo · 2021-08-05T20:32:50Z

@ffoodd Definitely seems that way. Dart Sass working without issue in our repo and the npm starter kit.

@MaxxDelusional Looks like that's not compiling correctly then. What version of Sass are you using?

morrow95 · 2021-08-05T22:58:18Z

@diyadin2 Using Koala here as well.

harnishdesign · 2021-08-06T03:57:56Z

@mdo I am also using Koala and get error.

MaxxDelusional · 2021-08-06T12:21:01Z

@mdo I am using the Web Compiler extension for Visual Studio. I am not entirely sure what compiler it uses behind the scenes.

https://github.com/madskristensen/WebCompiler

morrow95 · 2021-08-06T15:27:58Z

For what it's worth, those of us using Koala already know that it hasn't been updated/supported in years now, but it looks like quite a lot of others haven't been updated either from the responses coming in. Nothing wrong with the code being used just that a lot of us have compilers that can't handle it yet or are using ones like Koala that will never be updated.

Sidenote... someone should really come out with a Koala-like app for Windows as a replacement. I would gladly pay for something with the same features/usability - haven't found anything close to it which is why I still use it.

harnishdesign · 2021-08-07T11:57:11Z

@morrow95 Yes, You are right. Koala hasn't been updated/supported.

@diyadin2 I am trying with Scout-app and, It is working fine now.

morrow95 · 2021-08-09T16:18:00Z

Is there any workaround for the time being while I try to find a replacement compiler? I'd prefer not to mod bs's scss files directly, but will do so in the meantime.

harms-tbd · 2021-08-09T16:48:46Z

@mdo I am using the Web Compiler extension for Visual Studio. I am not entirely sure what compiler it uses behind the scenes.

https://github.com/madskristensen/WebCompiler

I am using the same compiler and experiencing the same issue.

mdo · 2021-08-09T17:20:31Z

Oh boy, that compiler hasn't been updated in 6 years... I'd really suggest finding something else. I don't think we can practically provide support for something that is so far behind our development stack :\ .

cklenk · 2021-08-09T20:22:39Z

@mdo I am using the Web Compiler extension for Visual Studio. I am not entirely sure what compiler it uses behind the scenes.
https://github.com/madskristensen/WebCompiler

I am using the same compiler and experiencing the same issue.

Same here

betojaton · 2021-08-09T22:32:14Z

I have solved it with Scout App. (¬‿¬)

morrow95 · 2021-08-10T02:11:51Z

@betojaton Scout just doesn't cut it for me... no javascript, can't do input/output maps, and so on. Koala, when it was maintained, killed Scout in features. I'm actually looking to switch over to vs code, but trying to find a way to mimic what Koala did is proving a bit challenging since I've never used it before or know what is out there.

icebits · 2021-08-10T11:10:45Z

For those using Web Compiler extension. The default node-sass v4.9.3 not able to compile BS v5.1.0 anymore. Please manually download latest node-sass (at least v5.0) using npm, then replace node-sass folder in C:\Users<your id>\AppData\Local\Temp\WebCompiler1.12.394\node_modules. You also need to upgrade/replace existing Web Compiler's node.exe (located outside of node_modules folder), you can find the file after install node.js x64 for windows. Must use x64 executable file.

softwarea · 2021-09-06T08:00:20Z

For all those using Visual Studio 2019 and Mad Kristensen's "Web Compiler" extension: yes, this extension is five years old. I uninstalled this extension and instead installed another extension called "Sass Compiler", which is from Mad Kristensen as well. Using this new extension, the errors with BS v5.1.0 went away.

icebits · 2021-09-06T16:46:47Z

@softwarea Glad you had found the solution. Indeed it is from the same developer. Sass compiler is using libsass.dll, not sure about this library. I had cloned the Web Compiler source code and compile the vsix with latest node-sass to use on visual studio 2019. There is another developer already done the extension that work on visual studio 2022 x64. But since node-sass already deprecated, so not sure whether these two extensions will continue to work on BS in future.

mdo · 2021-09-06T22:06:25Z

Going to close this out as a compiler issue. I've added a mention of this to the v5.1.1 blog post (see draft at twbs/blog#234). Please continue to leave comments here for alternative compilers for folks. Thanks!

zybersup · 2021-09-29T07:40:35Z

I have just faced this problem and quickly got to know the cause from this discussion. I would also love to use Koala so I tried finding a solution with Koala. Finally I got a solution using Dart Sass as a system sass in Koala. However there are some modification needed.

the following steps:

Download the standalone Dart Sass from https://github.com/sass/dart-sass/releases/tag/1.42.1, then extract and put it in your computer anywhere you want.
Go to Koala > Settings > Sass.
See Advanced Settings.
Check Use the System Sass compiler.
Put the full path to Dart Sass compiler in the box below. (In my case, it is "C:\path\to\dart-sass\sass.bat".) Must not add any arguments after the file location because Koala will enclose all of this with double quote to support directory name with spaces.
Modify the sass.bat to remove unsupported options which Koala will pass out (for its default Ruby Sass) and modify some options supported by Dart Sass. I put the following lines into sass.bat just before the real execution line.

!!! The BAT script here has error with space in scss file path. Please instead use the fixed one from here: oklai/koala#837 (comment)

set check_style=%arguments: nested=%
if not "%check_nested%"=="%arguments%" set style=expanded
set check_style=%arguments: expanded=%
if not "%check_style%"=="%arguments%" set style=expanded
set check_style=%arguments: compact=%
if not "%check_style%"=="%arguments%" set style=compressed
set check_style=%arguments: compressed=%
if not "%check_style%"=="%arguments%" set style=compressed

set sourcemap=
set check_sourcemap=%arguments:--sourcemap=%
if not "%check_sourcemap%"=="%arguments%" set sourcemap=--no-source-map

set arguments=%1 %2 %3 %4 --style=%style% %sourcemap%

Then enjoy conveniences from Koala.

Remark: Dart Sass will support only 2 options, source mapping [yes/no] and output style [expanded/compressed].

morrow95 · 2021-09-29T23:31:47Z

I have just faced this problem and quickly got to know the cause from this discussion. I would also love to use Koala so I tried finding a solution with Koala. Finally I got a solution using Dart Sass as a system sass in Koala. However there are some modification needed.

the following steps:

Download the standalone Dart Sass from https://github.com/sass/dart-sass/releases/tag/1.42.1, then extract and put it in your computer anywhere you want.

Go to Koala > Settings > Sass.

See Advanced Settings.

Check Use the System Sass compiler.

Put the full path to Dart Sass compiler in the box below. (In my case, it is "C:\path\to\dart-sass\sass.bat".)

Modify the sass.bat to remove unsupported options which Koala will pass out (for its default Ruby Sass) and modify some options supported by Dart Sass. I put the following lines into sass.bat just before the real execution line.
set check_style=%arguments: nested=%
if not "%check_nested%"=="%arguments%" set style=expanded
set check_style=%arguments: expanded=%
if not "%check_style%"=="%arguments%" set style=expanded
set check_style=%arguments: compact=%
if not "%check_style%"=="%arguments%" set style=compressed
set check_style=%arguments: compressed=%
if not "%check_style%"=="%arguments%" set style=compressed

set sourcemap=
set check_sourcemap=%arguments:--sourcemap=%
if not "%check_sourcemap%"=="%arguments%" set sourcemap=--no-source-map

set arguments=%1 %2 %3 %4 --style=%style% %sourcemap%
Then enjoy conveniences from Koala.

Remark: Dart Sass will support only 2 options, source mapping [yes/no] and output style [expanded/compressed].

@zybersup Just tried your suggestion for Dart with Koala... whenever I try to compile it errors on every file. For example :

C:\Users\Support\Documents\My Web Sites\BS5\example.com\_config\scss\bootstrap.scss

'Web' is not recognized as an internal or external command, operable program or batch file.  Web was unexpected at this time.

Any ideas? Does it not like the spaces in the file location or something? That is the only place I can think of that the word 'Web' is referenced.

zybersup · 2021-09-30T04:08:05Z

Replied at oklai/koala#837 (comment).

riodelphino · 2022-05-18T17:40:02Z

I think the cause is in the version of 'sass' command.

I tested to compile bootstrap 5.0.0 and 5.1.3 on mac, then I got same issue.

I checked the version of 'sass' command installed by gem.
It seems to be too old. (v3.4.25)

So,
gem uninstall sass

Because I am a beginner, I thought "npm is better ?"
So,
npm install sass -g

Then, it works.

( I chose npm. but I guess just upgrading gem also works, right ? )

dogooddesignco · 2022-08-20T13:08:46Z

I'm using Prepros to compile which is using Dart Sass 1.52.1 and I'm using Bootstrap 5.2.0. I'm getting the error:
Undefined variable. } @else { @return rgba (var(--#${$prefix}...
on line 47, column 26 of node_modules/bootstrap/scss/_functions.scss

Is there a known issue with this version of Dart Sass and Bootstrap?

morpolspc · 2022-08-20T14:29:58Z

@dogooddesignco - Been using BS 5.2.0 since it came out and haven't had this issue, but I am using Koala with Dart using the info earlier in this thread (not sure if that is the difference or not).

bellatrix988 · 2022-09-01T07:32:51Z

@dogooddesignco I had similar issue with undefined variable for the same line. It turned out that in bootstrap 5.2 they replaced variable $variable-prefix with $prefix and it caused an issue for css package I'm using for.

The downgrading bootstrap to 5.1.3 helped me. It worth to try.

mrelliot69 · 2022-10-07T09:08:37Z

having also this issue with bootstrap 5.2 using scssphp compiler
any idea on how to solve it?

mahyaghadrdan · 2022-11-07T09:47:42Z

6. sass.bat j

Thank you. I did it but I can't open my sass.bat. it's opened just for less than 1 second and it's closed again. What should I do?

maheshbokkisam · 2022-11-09T10:36:20Z

I am getting below error

Angular 14.2.0
Bootstrap 5.2.2

my custom.scss file as below

felcksn · 2022-11-15T11:42:00Z

@maheshbokkisam I get the exact same error after updating to angular 14

cybercussion · 2022-11-16T20:29:44Z

Am I losing my mind or did they rename variables in a dot release?

I had to do a diff with my scss/_variables.scss and node_modules/bootstrap/scss/_variables.scss and fix all the changes using a external diff tool.

Like:

// Prefix for :root CSS variables

$variable-prefix:             bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
$prefix:                      $variable-prefix !default;

russcarver · 2022-11-19T22:03:37Z

I am getting something similar in Angular 15.0.0 (with Angular Material 15.0.0).

My app's color theme is customizable by a configuration loaded at runtime. As such, I set the theme to be based on CSS4 variables - eg:

:root {
  --theme-primary-50: #EEF6F5;
  --theme-primary-100: #D4EAE7;
  --theme-primary-200: #B8DCD7;
  --theme-primary-300: #9CCDC7;
  --theme-primary-400: #86C3BB;
  --theme-primary-500: #71B8AF;
  --theme-primary-600: #69B1A8;
  --theme-primary-700: #5EA89F;
  --theme-primary-800: #54A096;
  --theme-primary-900: #429186;
  --theme-primary-A100: #E7FFFC;
  --theme-primary-A200: #B4FFF4;
  --theme-primary-A400: #81FFED;
  --theme-primary-A700: #68FFE9;
}

$primaryPalette: (
  50 : var(--theme-primary-50),
  100 : var(--theme-primary-100),
  200 : var(--theme-primary-200),
  300 : var(--theme-primary-300),
  400 : var(--theme-primary-400),
  500 : var(--theme-primary-500),
  600 : var(--theme-primary-600),
  700 : var(--theme-primary-700),
  800 : var(--theme-primary-800),
  900 : var(--theme-primary-900),
  A100 : var(--theme-primary-A100),
  A200 : var(--theme-primary-A200),
  A400 : var(--theme-primary-A400),
  A700 : var(--theme-primary-A700),
  contrast: (
    50: var(--color__text),
    100: var(--color__text),
    200: var(--color__text),
    300: var(--color__text),
    400: var(--color__text),
    500: var(--color__text--light),
    600: var(--color__text--light),
    700: var(--color__text--light),
    800: var(--color__text--light),
    900: var(--color__text--light),
    A100: var(--color__text),
    A200: var(--color__text--light),
    A400: var(--color__text--light),
    A700: var(--color__text--light),
  )
);

...

// Define the primary, accent and warn palettes
$default-primary-palette: mat.define-palette($primaryPalette);
$default-accent-palette: mat.define-palette($accentPalette);
$default-warn-palette: mat.define-palette($warnPalette);

// Create the Material theme object
$theme: mat.define-light-theme($default-primary-palette, $default-accent-palette, $default-warn-palette);

@include mat.all-component-themes($theme);

// Apply the theme to the user components
@include components-theme($theme);

I then alter those variables at runtime. This used to work just fine, but now, Angular Material complains (at compile time) with this:

HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: var(--theme-primary-500) is not a color.
   ╷
16 │     track-color: color.adjust(mdc-theme-color.prop-value($color), $alpha: -0.75),
   │                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 16:18  -palette-styles()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 28:7   @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 176:5     @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 216:3     disable-mdc-fallback-declarations()
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 175:3     using-mdc-theme()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 26:3   color()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 53:7   @content
  node_modules/@angular/material/core/theming/_theming.scss 402:3             private-check-duplicate-theme-styles()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 47:3   theme()
  node_modules/@angular/material/core/theming/_all-theme.scss 47:5            @content
  node_modules/@angular/material/core/theming/_theming.scss 402:3             private-check-duplicate-theme-styles()
  node_modules/@angular/material/core/theming/_all-theme.scss 44:3            all-component-themes()
  src/app/scss/theme/_theme.scss 146:1

Based on other responses above, is it possible Angular Material has a bug where it is no longer supporting CSS4 variables in its themes?

AdrianM · 2022-12-02T14:04:45Z

same here (css variables no longer allowed with Angular 15.0.0?)

alicelebidev · 2022-12-05T11:05:29Z

I am getting something similar in Angular 15.0.0 (with Angular Material 15.0.0).

My app's color theme is customizable by a configuration loaded at runtime. As such, I set the theme to be based on CSS4 variables - eg:

:root {
  --theme-primary-50: #EEF6F5;
  --theme-primary-100: #D4EAE7;
  --theme-primary-200: #B8DCD7;
  --theme-primary-300: #9CCDC7;
  --theme-primary-400: #86C3BB;
  --theme-primary-500: #71B8AF;
  --theme-primary-600: #69B1A8;
  --theme-primary-700: #5EA89F;
  --theme-primary-800: #54A096;
  --theme-primary-900: #429186;
  --theme-primary-A100: #E7FFFC;
  --theme-primary-A200: #B4FFF4;
  --theme-primary-A400: #81FFED;
  --theme-primary-A700: #68FFE9;
}

$primaryPalette: (
  50 : var(--theme-primary-50),
  100 : var(--theme-primary-100),
  200 : var(--theme-primary-200),
  300 : var(--theme-primary-300),
  400 : var(--theme-primary-400),
  500 : var(--theme-primary-500),
  600 : var(--theme-primary-600),
  700 : var(--theme-primary-700),
  800 : var(--theme-primary-800),
  900 : var(--theme-primary-900),
  A100 : var(--theme-primary-A100),
  A200 : var(--theme-primary-A200),
  A400 : var(--theme-primary-A400),
  A700 : var(--theme-primary-A700),
  contrast: (
    50: var(--color__text),
    100: var(--color__text),
    200: var(--color__text),
    300: var(--color__text),
    400: var(--color__text),
    500: var(--color__text--light),
    600: var(--color__text--light),
    700: var(--color__text--light),
    800: var(--color__text--light),
    900: var(--color__text--light),
    A100: var(--color__text),
    A200: var(--color__text--light),
    A400: var(--color__text--light),
    A700: var(--color__text--light),
  )
);

...

// Define the primary, accent and warn palettes
$default-primary-palette: mat.define-palette($primaryPalette);
$default-accent-palette: mat.define-palette($accentPalette);
$default-warn-palette: mat.define-palette($warnPalette);

// Create the Material theme object
$theme: mat.define-light-theme($default-primary-palette, $default-accent-palette, $default-warn-palette);

@include mat.all-component-themes($theme);

// Apply the theme to the user components
@include components-theme($theme);

I then alter those variables at runtime. This used to work just fine, but now, Angular Material complains (at compile time) with this:

HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: var(--theme-primary-500) is not a color.
   ╷
16 │     track-color: color.adjust(mdc-theme-color.prop-value($color), $alpha: -0.75),
   │                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 16:18  -palette-styles()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 28:7   @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 176:5     @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 216:3     disable-mdc-fallback-declarations()
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 175:3     using-mdc-theme()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 26:3   color()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 53:7   @content
  node_modules/@angular/material/core/theming/_theming.scss 402:3             private-check-duplicate-theme-styles()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 47:3   theme()
  node_modules/@angular/material/core/theming/_all-theme.scss 47:5            @content
  node_modules/@angular/material/core/theming/_theming.scss 402:3             private-check-duplicate-theme-styles()
  node_modules/@angular/material/core/theming/_all-theme.scss 44:3            all-component-themes()
  src/app/scss/theme/_theme.scss 146:1

Based on other responses above, is it possible Angular Material has a bug where it is no longer supporting CSS4 variables in its themes?

I've also just encountered this issue with Angular v15.0.0
Have you found a solution?

Petmun · 2022-12-06T09:08:24Z

I do have the same problem. Have you found a solution?

alicelebidev · 2022-12-06T09:25:46Z

I do have the same problem. Have you found a solution?

I'm stuck with this issue at the moment. So annoying...

cybercussion · 2022-12-06T14:59:41Z

In my case node_modules/bootstrap/scss/_variables.scss had been updated. And I had my own scss/theme/_variables.scss now out of date with Bootstrap 5.2. I had to do a diff to bring in the recent 'minor' update to satisfy missing SCSS variables.

bobliwang · 2022-12-10T09:15:12Z

Hi mate,

Based on the comments from Angular team before line 16, it seems they have difficulty in set the proper value of track-color.

Seems this file was modified by angular team for mdc, and it calls color.adjust function in .scss which requires a 'REAL' color instead of one relying on a css variable.
WARNING: it may affect a little style in progress bar. (but who cares :P )

The work round for Angular 15 is to replace line 16 with line 17 in _progress-bar-theme.scss from angular material source code.

Cheers

I am getting something similar in Angular 15.0.0 (with Angular Material 15.0.0).

My app's color theme is customizable by a configuration loaded at runtime. As such, I set the theme to be based on CSS4 variables - eg:

:root {
  --theme-primary-50: #EEF6F5;
  --theme-primary-100: #D4EAE7;
  --theme-primary-200: #B8DCD7;
  --theme-primary-300: #9CCDC7;
  --theme-primary-400: #86C3BB;
  --theme-primary-500: #71B8AF;
  --theme-primary-600: #69B1A8;
  --theme-primary-700: #5EA89F;
  --theme-primary-800: #54A096;
  --theme-primary-900: #429186;
  --theme-primary-A100: #E7FFFC;
  --theme-primary-A200: #B4FFF4;
  --theme-primary-A400: #81FFED;
  --theme-primary-A700: #68FFE9;
}

$primaryPalette: (
  50 : var(--theme-primary-50),
  100 : var(--theme-primary-100),
  200 : var(--theme-primary-200),
  300 : var(--theme-primary-300),
  400 : var(--theme-primary-400),
  500 : var(--theme-primary-500),
  600 : var(--theme-primary-600),
  700 : var(--theme-primary-700),
  800 : var(--theme-primary-800),
  900 : var(--theme-primary-900),
  A100 : var(--theme-primary-A100),
  A200 : var(--theme-primary-A200),
  A400 : var(--theme-primary-A400),
  A700 : var(--theme-primary-A700),
  contrast: (
    50: var(--color__text),
    100: var(--color__text),
    200: var(--color__text),
    300: var(--color__text),
    400: var(--color__text),
    500: var(--color__text--light),
    600: var(--color__text--light),
    700: var(--color__text--light),
    800: var(--color__text--light),
    900: var(--color__text--light),
    A100: var(--color__text),
    A200: var(--color__text--light),
    A400: var(--color__text--light),
    A700: var(--color__text--light),
  )
);

...

// Define the primary, accent and warn palettes
$default-primary-palette: mat.define-palette($primaryPalette);
$default-accent-palette: mat.define-palette($accentPalette);
$default-warn-palette: mat.define-palette($warnPalette);

// Create the Material theme object
$theme: mat.define-light-theme($default-primary-palette, $default-accent-palette, $default-warn-palette);

@include mat.all-component-themes($theme);

// Apply the theme to the user components
@include components-theme($theme);

I then alter those variables at runtime. This used to work just fine, but now, Angular Material complains (at compile time) with this:

HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: var(--theme-primary-500) is not a color.
   ╷
16 │     track-color: color.adjust(mdc-theme-color.prop-value($color), $alpha: -0.75),
   │                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 16:18  -palette-styles()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 28:7   @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 176:5     @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 216:3     disable-mdc-fallback-declarations()
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 175:3     using-mdc-theme()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 26:3   color()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 53:7   @content
  node_modules/@angular/material/core/theming/_theming.scss 402:3             private-check-duplicate-theme-styles()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 47:3   theme()
  node_modules/@angular/material/core/theming/_all-theme.scss 47:5            @content
  node_modules/@angular/material/core/theming/_theming.scss 402:3             private-check-duplicate-theme-styles()
  node_modules/@angular/material/core/theming/_all-theme.scss 44:3            all-component-themes()
  src/app/scss/theme/_theme.scss 146:1

Based on other responses above, is it possible Angular Material has a bug where it is no longer supporting CSS4 variables in its themes?

bobliwang · 2022-12-10T12:37:33Z

not that bad if we change it to: track-color: var(--theme-primary-300)

b9chris · 2023-08-08T20:17:35Z

I had this problem also, even after getting Visual Studio to compile the file. The issue comes down to the rgba() function sometimes being a SASS extension, not a CSS built-in - which was fine until CSS variables were introduced:

https://stackoverflow.com/a/76862918/176877

mdo added the awaiting-reply label Aug 5, 2021

ffoodd mentioned this issue Aug 9, 2021

Error: get-function generated in CSS in 5.1.0 #34719

Closed

mdo closed this as completed Sep 6, 2021

mdo removed the awaiting-reply label Sep 6, 2021

zybersup mentioned this issue Sep 29, 2021

Request to update sass compiler to use dart sass instead of NodeScass/Ruby Scass oklai/koala#837

Open

mdo mentioned this issue Oct 13, 2021

Error when upgrading from 4.5.3 to 5.1.3 #35177

Closed

3 tasks

Error: $color: "var(--bs-primary-rgb)" is not a color for `rgba' in v5.1.0 #34693

Error: $color: "var(--bs-primary-rgb)" is not a color for `rgba' in v5.1.0 #34693

Comments

harnishdesign commented Aug 5, 2021

diyadin2 commented Aug 5, 2021

morrow95 commented Aug 5, 2021

mdo commented Aug 5, 2021

morrow95 commented Aug 5, 2021 • edited Loading

mdo commented Aug 5, 2021

diyadin2 commented Aug 5, 2021

diyadin2 commented Aug 5, 2021

ffoodd commented Aug 5, 2021

MaxxDelusional commented Aug 5, 2021 • edited Loading

mdo commented Aug 5, 2021

morrow95 commented Aug 5, 2021

harnishdesign commented Aug 6, 2021

MaxxDelusional commented Aug 6, 2021 • edited Loading

morrow95 commented Aug 6, 2021

harnishdesign commented Aug 7, 2021

morrow95 commented Aug 9, 2021

harms-tbd commented Aug 9, 2021

mdo commented Aug 9, 2021 • edited Loading

cklenk commented Aug 9, 2021

betojaton commented Aug 9, 2021

morrow95 commented Aug 10, 2021

icebits commented Aug 10, 2021

softwarea commented Sep 6, 2021

icebits commented Sep 6, 2021 • edited Loading

mdo commented Sep 6, 2021

zybersup commented Sep 29, 2021 • edited Loading

morrow95 commented Sep 29, 2021 • edited Loading

zybersup commented Sep 30, 2021

riodelphino commented May 18, 2022 • edited Loading

dogooddesignco commented Aug 20, 2022

morpolspc commented Aug 20, 2022

bellatrix988 commented Sep 1, 2022 • edited Loading

mrelliot69 commented Oct 7, 2022

mahyaghadrdan commented Nov 7, 2022

maheshbokkisam commented Nov 9, 2022

felcksn commented Nov 15, 2022

cybercussion commented Nov 16, 2022 • edited Loading

russcarver commented Nov 19, 2022 • edited Loading

AdrianM commented Dec 2, 2022

alicelebidev commented Dec 5, 2022

Petmun commented Dec 6, 2022

alicelebidev commented Dec 6, 2022

cybercussion commented Dec 6, 2022

bobliwang commented Dec 10, 2022 • edited Loading

bobliwang commented Dec 10, 2022

b9chris commented Aug 8, 2023

morrow95 commented Aug 5, 2021 •

edited

Loading

MaxxDelusional commented Aug 5, 2021 •

edited

Loading

MaxxDelusional commented Aug 6, 2021 •

edited

Loading

mdo commented Aug 9, 2021 •

edited

Loading

icebits commented Sep 6, 2021 •

edited

Loading

zybersup commented Sep 29, 2021 •

edited

Loading

morrow95 commented Sep 29, 2021 •

edited

Loading

riodelphino commented May 18, 2022 •

edited

Loading

bellatrix988 commented Sep 1, 2022 •

edited

Loading

cybercussion commented Nov 16, 2022 •

edited

Loading

russcarver commented Nov 19, 2022 •

edited

Loading

bobliwang commented Dec 10, 2022 •

edited

Loading