自定义主题 Angular 材质

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 SO 帖子。但是，它要求我使用 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

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