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

Question

对于学校作业，我们需要使用有角度的材料。我制作了一个自定义主题，名为：weather-theme.scss

\n

该文件中的代码如下：

\n

@import '~@angular/material/theming';\n\n@include mat-core();\n\n// Define the palettes for your theme using the Material Design palettes available in palette.scss\n// (imported above). For each palette, you can optionally specify a default, lighter, and darker\n// hue. Available color palettes: https://material.io/design/color/\n$weather-theme-primary: mat-palette($mat-gray, 800, 700, 600);\n$weather-theme-accent: mat-palette($mat-amber, 800, 700);\n\n// The warn palette is optional (defaults to red).\n$weather-theme-warn: mat-palette($mat-red);\n\n// Create the theme object (a Sass map containing all of the palettes).\n$weather-theme-theme: mat-light-theme(\n    $weather-theme-primary,\n    $weather-theme-accent,\n    $weather-theme-warn\n);\n\n// Include theme styles for core and each component used in your app.\n// Alternatively, you can import and @include the theme mixins for each component\n// that you are using.\n@include angular-material-theme($weather-theme-theme);\n\n

\n

主题有效。

\n

我用styles.scss代码导入主题：

\n

@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');\n\n@import './weather-theme.scss';\n//@import './variables.scss';\n\nhtml,\nbody {\n    font-family: 'Nunito';\n}\n\nhtml,\nbody {\n    height: 100%;\n}\nbody {\n    margin: 0;\n}\n

\n

现在的问题是，我想在其他样式中使用主题变量，就像我想为主体赋予主要颜色一​​样，代码如下：

\n

body { \n    margin: 0;\n    background-color: $weather-theme-primary;\n}\n

\n

但是当我导入weather-theme.scss变量时，scss intellisense 无法识别变量，它不起作用，并且出现以下错误：

\n

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)\nModule build failed (from ./node_modules/sass-loader/lib/loader.js):\n\n    background-color: $weather-theme-primary;\n                     ^\n      (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.\n   \xe2\x95\xb7\n13 \xe2\x94\x82     background-color: $weather-theme-primary;\n   \xe2\x94\x82                       ^^^^^^^^^^^^^^^^^^^^^^\n   \xe2\x95\xb5\n  stdin 13:23  root stylesheet\n      in /media/sean-paul/Data/Projects/School/CSP/OpenWeatherAngularApp/src/scss/styles.scss (line 13, column 23)\n

\n

我在这里做错了什么？

\n

注意：我使用角度8

\n

提前致谢！

\n

Answer 1

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

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