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

【问题标题】：use of $primary scss variable in angular/material2在 angular/material2 中使用 $primary scss 变量
【发布时间】：2016-10-10 06:36:54
【问题描述】：

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

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

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

提前谢谢你

【问题讨论】：

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

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

@import "frontEndFramework.scss";

【讨论】：