Я пытаюсь использовать собственную тему для своего проекта Angular. Я использую CLI.
Я следовал официальному материалу Angular docs , чтобы создать собственную тему.
Это мой пользовательский файл темы:
SRC / treadwill.theme.scss:
@import '~@angular/material/theming';
// 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. Available color palettes: https://material.io/design/color/
$treadwill-app-primary: mat-palette($mat-indigo);
$treadwill-app-accent: mat-palette($mat-pink, A200, A100, A400);
// The warn palette is optional (defaults to red).
$treadwill-app-warn: mat-palette($mat-red);
// Create the theme object (a Sass map containing all of the palettes).
$treadwill-app-theme: mat-light-theme($treadwill-app-primary, $treadwill-app-accent, $treadwill-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($treadwill-app-theme);
Я добавил .scss в свой angular.json:
"styles": [
"src/styles.css",
"src/treadwill.theme.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
Но пользовательская тема не применяется к элементам материала.
Я прошел этот ТАК. Тем не менее, это требует, чтобы я использовал scss для стилизации остальной части моего проекта, но я хочу использовать css для этого.
Я попытался импортировать файл scss в мой файл src / styles.css следующим образом:
@import 'treadwill.theme.scss';
но выдает ошибку:
ERROR in ./src/styles.css (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./src/styles.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError
(2:1) Unknown word
1 | @import '~@angular/material/theming';
> 2 | // Plus imports for other components in your app.
| ^
3 |
4 | // Include the common styles for Angular Material. We include this here so that you only
Есть ли какие-нибудь подсказки о том, как я могу использовать пользовательские темы и продолжать использовать css для стилизации остальной части проекта?