如何在其他 scss 文件中使用角度材质主题颜色变量

Posted

技术标签:

【中文标题】如何在其他 scss 文件中使用角度材质主题颜色变量【英文标题】:how to use angular material theme colour variables in other scss files 【发布时间】:2020-01-30 14:21:47 【问题描述】:

对于学校作业,我们需要使用棱角分明的材料。我制作了一个自定义主题,名为:weather-theme.scss

该文件中的代码如下:

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

@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$weather-theme-primary: mat-palette($mat-gray, 800, 700, 600);
$weather-theme-accent: mat-palette($mat-amber, 800, 700);

// The warn palette is optional (defaults to red).
$weather-theme-warn: mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$weather-theme-theme: mat-light-theme(
    $weather-theme-primary,
    $weather-theme-accent,
    $weather-theme-warn
);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($weather-theme-theme);

主题有效。

然后我在styles.scss 中导入主题,代码如下:

@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');

@import './weather-theme.scss';
//@import './variables.scss';

html,
body 
    font-family: 'Nunito';


html,
body 
    height: 100%;

body 
    margin: 0;

现在的问题是,我想在其他样式中使用主题变量,比如我想给主体赋予原色,代码如下:

body  
    margin: 0;
    background-color: $weather-theme-primary;

但是当我导入 weather-theme.scss 时,变量由 scss 智能感知重新调整它不起作用,并且我收到以下错误:

ERROR in ./src/scss/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/scss/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

    background-color: $weather-theme-primary;
                     ^
      (50: #fafafa, 100: #f5f5f5, 200: #eeeeee, 300: #e0e0e0, 400: #bdbdbd, 500: #9e9e9e, 600: #757575, 700: #616161, 800: #424242, 900: #212121, A100: #ffffff, A200: #eeeeee, A400: #bdbdbd, A700: #616161, 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: rgba(0, 0, 0, 0.87), 600: white, 700: white, 800: white, 900: white, A100: rgba(0, 0, 0, 0.87), A200: rgba(0, 0, 0, 0.87), A400: rgba(0, 0, 0, 0.87), A700: white), default: #424242, lighter: #616161, darker: #757575, text: #424242, default-contrast: white, lighter-contrast: white, 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": rgba(0, 0, 0, 0.87), "600-contrast": white, "700-contrast": white, "800-contrast": white, "900-contrast": white, "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": white, "contrast-contrast": null) isn't a valid CSS value.
   ╷
13 │     background-color: $weather-theme-primary;
   │                       ^^^^^^^^^^^^^^^^^^^^^^
   ╵
  stdin 13:23  root stylesheet
      in /media/sean-paul/Data/Projects/School/CSP/OpenWeatherAngularApp/src/scss/styles.scss (line 13, column 23)

我在这里做错了什么?

注意:我使用 angular 8

提前致谢!

【问题讨论】:

【参考方案1】:

你的变量是一张地图。你必须声明你想要的属性。

background-color: map-get($weather-theme-primary, 100)

【讨论】:

【参考方案2】:

您在weather-theme.scss 中创建的$weather-theme-primary 不包含单个值,而是包含整个调色板。查看您创建它的 mixin 的名称,并且在错误消息中,您可以看到被转储的实际对象(... 50: #fafafa, 100: #f5f5f5, ...,其中50 是第一个键,#fafafa 是它的颜色,@ 987654326@ 是第二个键,#f5f5f5 是那个颜色,等等...)。

您可以通过以下方式从地图中提取值:

$my-color: map-get($weather-theme-primary, 50)

然后该颜色可以用于实际的 scss 规则。

【讨论】:

以上是关于如何在其他 scss 文件中使用角度材质主题颜色变量的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 angular5 和 angular 材质创建自定义颜色主题

Angular 材质 io 预定义主题颜色

如何在角度材质中定义自定义主题以控制按钮文本的颜色?

Angular 材质自定义组件主题

如何在顺风 css 中使用颜色或 css/scss 中的材质 ui

Angular 材质设置主题颜色与颜色选择器