Custom theming Angular material

Question

I am trying to use a custom theme for my Angular project. I am using CLI.

I have followed the official Angular material docs to set up a custom theme.

This is my custom theme file:

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);

I have added the .scss to my angular.json:

"styles": [
   "src/styles.css",
   "src/treadwill.theme.scss",
   "node_modules/bootstrap/dist/css/bootstrap.min.css"
 ],

But the custom theme is not getting applied to the material elements.

I have gone through this SO post. However, it requires me to use scss for styling the rest of my project, but I want to use css for that.

I have tried to import the scss file in my src/styles.css like this:

@import 'treadwill.theme.scss';

but it throws an error:

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

Any leads on how I can use custom theming and keep using css to style the rest of the project?

score 3 · Accepted Answer · answered Jan 17 '19 at 07:43

3

You're trying to @import a SASS file in a CSS file. That won't work. I'd suggest changing styles.css to styles.scss and trying it again.

answered Jan 17 '19 at 07:43

moritzg

4,266
3
37
62

would that require me to use scss for the rest of the project too? – Outsider Jan 17 '19 at 07:47
Not necessarily, you can just use scss for the styles and css for the rest. But why do you just want to use css? – moritzg Jan 17 '19 at 07:54
Okay, I will try that. I am comfortable using css. – Outsider Jan 17 '19 at 07:57
SCSS and CSS is very similar you don't need to learn anything new :) – moritzg Jan 17 '19 at 08:09
It worked. Actually, a lot of the existing code is in css, and I don't want to spend time porting that to scss. – Outsider Jan 17 '19 at 10:34

Custom theming Angular material

1 Answers1