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

Question

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

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

有没有办法在自定义组件 scss 样式中使用 $primary 变量？当 angular-cli 尝试编译组件的样式表时，任何尝试结果：'未定义的变量：“$primary”'。

先感谢您

Answer 1

我将@John answer的答案视为相关。在尝试导入我的自定义主题失败后，我找不到发生了什么变化。只是为了完整的答案，我正在使用类似的东西：

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

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

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

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

Answer 2

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

@import "frontEndFramework.scss";