for a school assignment we need to use angular material. I made a custom theme called: weather-theme.scss
the code in this file is as following:
@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);
the theme works.
and i import the theme in styles.scss
with the code:
@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;}
now the problem is, I want to use the Theme variables in other styles like i want to give the body the primary colour from that the code is like this:
body {
margin: 0;
background-color: $weather-theme-primary;
}
but when i import the weather-theme.scss
the variables are reconized by the scss intellisense it doesn't work, and i get the following error:
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)
what am i doing wrong here?
note: i use angular 8
Thanks in advance!