Я следил за документацией angular/material, как создавать пользовательскую тему, следить за другими блогами и проверять различные проблемы с переполнением стека, но, похоже, эта работа не работает. У меня есть следующие styles.css, angular -cli.json, theme.scss и еще один sass файл, в котором цвета моей темы приходят из super-styles.sass.
styles.css
...
@import 'assets/styles/theme.scss';
...
angular -cli.json
...
"styles": [
"styles.css",
"src/assets/styles/theme.scss"
],
...
theme.scss
@import '[email protected]/material/theming';
@import "super-styles";
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@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.
$candy-app-primary: mat-palette($darkblue, A400);
$candy-app-accent: mat-palette($orange, A400);
// The warn palette is optional (defaults to red).
$candy-app-warn: mat-palette($alert);
// Create the theme object (a Sass map containing all of the palettes).
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-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($candy-app-theme);
Супер-styles.sass
...
$darkblue: #7faedd
$mediumblue: #85ceef
$lightblue: #c5e8f1
$yellow: #f4ef5f
$alert: #f37652
$orange: #fbb03c
...
Согласно учебникам, я чувствую, что это должно работать, но angular не компилируется, и я получаю сообщение об ошибке.
ОШИБКА в. / node_modules/css-loader?{ "sourceMap":false, "importLoaders":1}!./node_modules/postcss-loader?{ "ident": "postcss" }!./src/assets/стили/theme.scss Ошибка сборки модуля: Неизвестное слово (23: 1)
21 | $candy-app-theme: mat-light-theme ($ candy-app-primary, $candy-app-accent, $candy-app-warn); 22 |
23 |//Включить стили темы для ядра и каждого компонента, используемого в вашем приложении. | ^ 24 |//В качестве альтернативы вы можете импортировать и @включать темы mixins для каждого компонента 25 |//, который вы используете.
Любая помощь в том, как создать пользовательскую тему и использовать ее в моем приложении angular, будет очень полезна. Спасибо!