将角材料主题添加到 ionic 3 [英] Adding angular material theme into ionic 3

问题描述

如何在我的应用中包含有角度的材质主题.

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

我在 variable.scss 中尝试了 @import '~@angular/material/prebuilt-themes/indigo-pink.css' 并尝试使用我的应用程序模块的 styleUrls 中的路径.也尝试使用../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css".

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.

在所有情况下，浏览器都给出 404

In all the cases browser is giving 404

推荐答案

此错误是由于 ionic app-scripts 中存在的配置不包含其他 node_modules 路径.要解决此问题，请创建一个文件

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

sass.config.json in config folder

以下内容

// 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'
  ]

};

更新文件

package.json

package.json

并添加以下内容

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

这将覆盖所提供内容的默认应用脚本配置.

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

这篇关于将角材料主题添加到 ionic 3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！