Adding angular material theme into ionic 3

Question

How can I get angular material theme included in my app.

I tried @import '~@angular/material/prebuilt-themes/indigo-pink.css' in variable.scss and tried using the path in styleUrls of my app module as well. Tried using '../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css' as well.

In all the cases browser is giving 404

Answer 1

This error is due to the configuration present in ionic app-scripts which doesn't include other node_modules paths. To fix this create a file

sass.config.json in config folder

with the below contents

// cross verify with node_modules/@ionic/app-scripts/config/sass.config.js

module.exports = {

    /**
     * includePaths: Used by node-sass for additional
     * paths to search for sass imports by just name.
     */
    includePaths: [
    'node_modules/ionic-angular/themes',
    'node_modules/ionicons/dist/scss',
    'node_modules/ionic-angular/fonts',

    'PATH/TO/YOUR/FILE'
  ]

};

Update the file

package.json

and add the below

"config": {
    "ionic_sass": "./config/sass.config.js"
},

This would override the default app-script config for what is provided.

Answer 2

To include the material css the following worked for me:

First create file config/sass.config.json

Second Enter the following:

// cross verify with node_modules/@ionic/app-scripts/config/sass.config.js

module.exports = {

  /**
  * includePaths: Used by node-sass for additional
  * paths to search for sass imports by just name.
  */
  includePaths: [
  'node_modules/ionic-angular/themes',
  'node_modules/ionicons/dist/scss',
  'node_modules/ionic-angular/fonts',

  'node_modules/@angular/material/prebuilt-themes'
  ],

  includeFiles: [
    /\.(s?(c|a)ss)$/i
  ],

  excludeFiles: [
    // /\.(wp|ios|md).(scss)$/i
  ],

};

Third in packages.json at the bottom (still inside the last curly bracket) add

"config": {
    "ionic_sass": "./config/sass.config.js"
},

Fourth run

ionic serve

Explenation

The inlcudeFiles part is to be able to also include css (as the prebuild angular-material indigo-pink is an css and not an scss file.

The exclude files excludes a lot of ionic-css. I had the feeling some of the default ionic theme interferes with angular-material css, so I put this. BUT: Only put these lines if you are not planning to use the default components.

You can get rid of more default css such as ionicons as explained here https://julienrenaux.fr/2017/07/20/optimized-ionic-angular-css-bundle-for-pwas/#Remove_ionicons