Angular 如何在组件样式中应用内置主题变量的角度材质？

我想为我的

列表项的
活动类创建一个动态
背景色

HTML:

这会引发错误

ERROR in Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
   ╷
   │   background-color: $primary;
   │                     ^^^^^^^^
   ╵

我遗漏了什么？
导入
css
时，颜色变量在
scss
文件中声明。也就是说，您无法通过导入编译css文件来获取sass变量

如果你想正确地做这件事，你需要遵循指导原则

例如，获取材质颜色：

@import '~@angular/material/theming';

$primary: mat-palette($mat-indigo);
$accent:  mat-palette($mat-pink, A200, A100, A400);
$theme: mat-light-theme((
  color: (
    primary: $primary,
    accent: $accent,
  )
));

$color: mat-get-color-config($theme);

$primary: map-get($color, primary); 

.candy-carousel {
    // Use mat-color to extract individual colors from a palette.
    background-color: mat-color($config); // color will be there
    border-color: mat-color($config, A400); // a bit different hue
}


我已经工作了一段时间，以使其按预期工作。这是我用几行代码（使用
angular 11）
完成的工作的汇编：

在第一次回答问题后，我将所有文件从css更改为SCS
我创建了一个包含以下主要变量的样式：

2.1. 在
app
的同一级别，我创建了一个名为
styles
的文件夹
styles
，并在一个文件
\u variables.scss
中创建了以下内容：
@import'~@angular/material/theming'；
//主题配置
$primary:mat调色板（$mat indigo）；
$accent:mat调色板（$mat pink、A200、A100、A400）；
$warn:mat调色板（$mat red）；
$theme:mat light主题（$primary、$accent、$warn）；

2.2。我将该文件添加到
angular.json中的样式中：

。。。
“src/资产”
],
“风格”：[
“src/styles.scss”，
“src/styles/_variables.scss”
],
“脚本”
...

从我的组件
my component.scss
）中，我现在可以访问如下文件和变量：
@import“~/src/styles/_variables.scss”；
.小学{
颜色：垫子颜色（$primary）！重要；
}
抛出
$map:null不是贴图
您使用什么版本的角度材质？我的例子是v10，其他版本的语法有点不同。我的也是
v10
。我现在在使用
色调时非常困惑。如果我想使用不同的调色板颜色怎么办？例如，我希望它使用原色的
打火机
值。我应该怎么做？如果你想要一点不同的颜色，你需要为
mat color
mixin指定第二个参数。我更新了示例
mat color
还支持不透明度。
ERROR in Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
   ╷
   │   background-color: $primary;
   │                     ^^^^^^^^
   ╵

@import '~@angular/material/theming';

$primary: mat-palette($mat-indigo);
$accent:  mat-palette($mat-pink, A200, A100, A400);
$theme: mat-light-theme((
  color: (
    primary: $primary,
    accent: $accent,
  )
));

$color: mat-get-color-config($theme);

$primary: map-get($color, primary); 

.candy-carousel {
    // Use mat-color to extract individual colors from a palette.
    background-color: mat-color($config); // color will be there
    border-color: mat-color($config, A400); // a bit different hue
}