Question

如何在我的应用中添加角度素材主题。

我试过了@import＆＃39; ~@angular/material/prebuilt-themes/indigo-pink.css'在variable.scss中并尝试使用我的app模块的styleUrls中的路径。尝试使用＆＃39; ../../ node_modules/@angular/material/prebuilt-themes/indigo-pink.css'同样。

在所有情况下，浏览器都在提供404

Answer 1

此错误是由离子应用程序脚本中的配置引起的，该配置不包括其他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"
},

这将覆盖提供的默认app-script配置。

Answer 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

Explenation

inlcudeFiles部分也可以包含css（因为prebuild angular-material indigo-pink是一个css而不是scss文件。

排除文件排除了大量的离子css。我有一种默认离子主题干扰角度材料css的感觉，所以我把它。但是：如果您不打算使用默认组件，请仅放置这些行。

你可以摆脱更多默认的css，例如离子，如https://julienrenaux.fr/2017/07/20/optimized-ionic-angular-css-bundle-for-pwas/#Remove_ionicons

所述

Answer 3

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

因此，如果您在@import 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"

Answer 4

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

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

之后添加

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

到index.html

谢谢。

将角度材料主题添加到离子3中

4 个答案:

Explenation