将角度材质主题添加到 ionic 3答案

【问题标题】：Adding angular material theme into ionic 3将角度材质主题添加到 ionic 3
【发布时间】：2018-05-15 11:45:40
【问题描述】：

如何在我的应用程序中包含角度材质主题。

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

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

【问题讨论】：

将材料文件导入您的 app.scss。确保您的路径是正确的，因为这是这样做的方法。否则将其包含在您的 index.html 中（脏 imo）
我尝试在 app.scss 中导入，但仍然给我 404。但是，当我将预建主题的扩展名更改为 scss 并使用 sass.config 更新导入时，它对我有用。单独的 css 文件似乎有问题

标签： angular ionic-framework ionic3 angular-material2

【解决方案1】：

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

配置文件夹中的 sass.config.json

以下内容

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

并添加以下内容

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

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

【讨论】：

【解决方案2】：

要包含以下对我有用的材料 css：

首先创建文件config/sass.config.json

第二输入以下内容：

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

};

第三个在packages.json底部（还在最后一个大括号内）添加

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

第四次运行

ionic serve

解释

inlcudeFiles 部分还能够包含 css（因为预构建的 angular-material indigo-pink 是 css 而不是 scss 文件。

排除文件排除了很多 ionic-css。我感觉一些默认的 ionic 主题会干扰 angular-material css，所以我放了这个。但是：仅当您不打算使用默认组件时才添加这些行。

您可以摆脱更多默认 css，例如 ionicons，如此处https://julienrenaux.fr/2017/07/20/optimized-ionic-angular-css-bundle-for-pwas/#Remove_ionicons 所述

【讨论】：

【解决方案3】：

请注意，对于这种情况，一旦您想要导入 CSS 文件（不是 SCSS），您需要在@import 上提供文件名 >没有扩展名。如果您提供 .css 扩展名，@import 将编译为 CSS @import 规则，如 SASS documentation 所述。

因此，如果您将node_modules/@angular/material/prebuilt-themes 包含在您的includePaths 中，您的app.scss 将是这样的：

// 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"

【讨论】：

【解决方案4】：

按照网站上的说明执行此步骤，这将成功地在您的离子项目中添加角度材料。

https://www.freakyjolly.com/use-angular-material-in-ionic-3/

然后添加

  <link href="assets/indigo-pink.css" rel="stylesheet"/>

到 index.html

谢谢。

【讨论】：