在 angular/material2 中使用 $primary scss 变量

Question

我正在使用 angular-cli 和主题指南，以便在 angular/material2 应用程序中创建自定义主题。

在 scss 文件中，原色和强调色相应地分配给 $primary 和 $accent scss 变量。

有什么方法可以在自定义组件 scss 样式中使用 $primary 变量吗？任何尝试结果：'Undefined variable: "$primary"' 当 angular-cli 尝试编译组件的样式表时。

提前致谢

Answer 1

您可能必须在要更改的文件中使用导入语句或使用 $primary 变量。我正在使用来自前端框架的 scss，并且必须在我的 main.scss 文件中执行此操作：

@import "frontEndFramework.scss";

Answer 2

我将@John 的回答算作相关。在尝试导入我的自定义主题失败后，我找不到更改的内容。只是为了答案的完整性，我正在使用类似的东西：

@import '../my-custom-theme.scss';

g > .title {
  fill: md-color($primary);
}

给尝试设置 SVG 组件样式的任何人的附加信息：

在组件元数据中使用 'encapsulation: ViewEncapsulation.None'。 SVG 不支持 shadow dom 并且 angular2 封装的仿真模式向 css 选择器添加了对 SVG 组件无效的属性。

use of $primary scss variable in angular/material2