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
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.
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
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
Notice that for this case once that you want to import a CSS file (not a SCSS) you need to provide just the file name on @import without the extension. If you provide the .css extension the @import will be compiled to CSS @import rule as stated on SASS documentation.
So if you include node_modules/@angular/material/prebuilt-themes in your includePaths your app.scss will be something like this:
// http://ionicframework.com/docs/theming/
// App Global Sass
// --------------------------------------------------
// Put style rules here that you want to apply globally. These
// styles are for the entire app and not just one component.
// Additionally, this file can be also used as an entry point
// to import other Sass files to be included in the output CSS.
//
// Shared Sass variables, which can be used to adjust Ionic's
// default Sass variables, belong in "theme/variables.scss".
//
// To declare rules for a specific mode, create a child rule
// for the .md, .ios, or .wp mode classes. The mode class is
// automatically applied to the <body> element in the app.
@import "indigo-pink"
Do this steps as mention on the website, This will add angular material in your ionic project succesfully.
https://www.freakyjolly.com/use-angular-material-in-ionic-3/
after that add
<link href="assets/indigo-pink.css" rel="stylesheet"/>
to index.html
Thank you.
