Angular 2 Material 主题指的是 SCSS 中的颜色答案

【问题标题】：Angular 2 Material theme refer to color in SCSSAngular 2 Material 主题指的是 SCSS 中的颜色
【发布时间】：2017-08-21 20:59:53
【问题描述】：

我用官方guide创建了一个自定义主题。

@import '../node_modules/@angular/material/core/theming/_all-theme';
@include mat-core();

$primary: mat-palette($mat-teal);
$accent: mat-palette($mat-deep-orange);
$warn: mat-palette($mat-amber);

$theme: mat-light-theme($primary, $accent, $warn);

@include angular-material-theme($theme);

它确实有效。我可以用$primary 设置md-toolbar 或md-button 的颜色。但我无法访问组件的 SCSS 中的颜色变量。

:host {
  .mat-grid-tile-header {
    background-color: $primary;
  }
}

Webstorm 中的错误：

"Element 'primary' is resolved only by name without using of explicit imports"

构建失败后的错误： “未定义的变量”

好吧，我必须以某种方式导入它。但我不明白怎么做。

我尝试过导入主题：

@import "../../../theme.scss";
    :host {
      .mat-grid-tile-header {
        background-color: $primary;
      }
    }

Webstorm中的错误消失了，但是构建后又出现了新的错误：

Module build failed: 
undefined
            ^
      (50: #e0f2f1, 100: #b2dfdb, 200: #80cbc4, 300: #4db6ac, 400: #26a69a, 500: #009688, 600: #00897b, 700: #00796b, 800: #00695c, 900: #004d40, A100: #a7ffeb, A200: #64ffda, A400: #1de9b6, A700: #00bfa5, contrast: (50: rgba(0, 0, 0, 0.87), 100: rgba(0, 0, 0, 0.87), 200: rgba(0, 0, 0, 0.87), 300: rgba(0, 0, 0, 0.87), 400: rgba(0, 0, 0, 0.87), 500: white, 600: white, 700: white, 800: rgba(255, 255, 255, 0.87), 900: rgba(255, 255, 255, 0.87), A100: rgba(0, 0, 0, 0.87), A200: rgba(0, 0, 0, 0.87), A400: rgba(0, 0, 0, 0.87), A700: rgba(0, 0, 0, 0.87)), default: #009688, lighter: #b2dfdb, darker: #00796b, default-contrast: white, lighter-contrast: rgba(0, 0, 0, 0.87), darker-contrast: white, "50-contrast": rgba(0, 0, 0, 0.87), "100-contrast": rgba(0, 0, 0, 0.87), "200-contrast": rgba(0, 0, 0, 0.87), "300-contrast": rgba(0, 0, 0, 0.87), "400-contrast": rgba(0, 0, 0, 0.87), "500-contrast": white, "600-contrast": white, "700-contrast": white, "800-contrast": rgba(255, 255, 255, 0.87), "900-contrast": rgba(255, 255, 255, 0.87), "A100-contrast": rgba(0, 0, 0, 0.87), "A200-contrast": rgba(0, 0, 0, 0.87), "A400-contrast": rgba(0, 0, 0, 0.87), "A700-contrast": rgba(0, 0, 0, 0.87), "contrast-contrast": null) isn't a valid CSS value.

有人知道如何解决这个问题吗？提前致谢！

【问题讨论】：

标签： angular sass angular-material2

【解决方案1】：

您需要使用来自@angular/material/core/theming/_theming.scss 的mat-color($primary) 函数。它接受调色板并返回颜色。

【讨论】：

感谢您的快速回复！如果我导入theme.scss，这确实有效。但这意味着我必须在每个 scss 文件中导入文件。你知道有可能只做一次吗？这样会干净得多。
是的，不幸的是，没有办法进行全局导入，因为每个 .scss 文件都是单独编译的……我使用的是 webpack 别名，因此当 webpack 获取我的文件时，它会看到别名并替换它与正确的路径。这样我的导入看起来像这样：@import "~material-theming/_theming"。别名在 webpack 配置中如下所示：alias: { 'material-theming': path.resolve(__dirname, './node_modules/@angular/material/core/theming/') }
我在共享文件夹中有一个布局组件，包括在这个组件中引入theme.scss文件，变量在所有scss文件中都有。共享组件中的 scss 文件。 @import "../../extend-theme.scss"; .ng2-smart-row { &.selected { 背景：垫颜色（$primary，打火机，0.5）！重要； } }