Question

我正在尝试为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"
 ],

但是自定义主题未应用于材料元素。

我已经完成了this个帖子。但是，这要求我使用scss来设计项目的其余部分的样式，但是我想为此使用css。

我试图像这样在我的src / styles.css中导入scss文件：

@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设置项目其余部分样式的任何线索？

Answer 1

您正在尝试@import将CSS文件中的SASS文件。那行不通。我建议将styles.css更改为styles.scss，然后再试一次。

自定义主题角材料

1 个答案: