仅使用 Ionic 2 将 CSS 添加到一页

Question

我知道在 Ionic 2 中，我可以在 /app/pages/page-name/page-name.scss 中的页面特定 SCSS 文件中编写样式代码，然后在 /app/theme/app.core.scss 中包含指向这些文件的链接。但是，通过这种方式，特定于页面的样式代码会进入完整的应用程序样式文件，即使对于许多用户可能永远不会访问的页面也会增加它的大小。

如何创建仅包含在一个特定页面中的样式代码（在它自己的 CSS/SCSS 文件中，或在呈现页面的样式块中）？在 Ionic 中甚至推荐这样做吗？

Answer 1

在 Ionic 中不推荐这样做，我真的不明白这样做有什么好处，因为样式然后 minified，所以最终样式文件的大小赢了将减少那个很多（并且您将不得不修改很多东西 try 以使其以这种方式工作）。

尽管如此，您可以修改 gulpfile.js 以更改其默认工作方式（缩小并将所有样式放在一个文件中），以便制作每个 scss 文件（属于单个页面）每页编译成一个 css 文件（位于 www/styles 文件夹中），然后将它们导入每个 ionic page's html 和

<link md-href="styles/pageStyle.css" rel="stylesheet">

您必须在 html page 的 body 中导入这些样式（因为 Ionic 应用程序在 <ion-app></ion-app> 中加载，它位于 body 的 index.html 页）。

如您所见，here 适用于所有现代浏览器，但我确信这不是使用 Ionic 的推荐方式，而且我认为不值得为此付出努力.

Answer 2

查看 angular2 文档，不确定它是否可以在不修改 gulpfile 的情况下使用 url 模板，但这应该可以帮助您入门
=> https://angular.io/docs/ts/latest/guide/component-styles.html#!#using-component-styles

@Component({
  selector: 'hero-app',
  template: `
    <h1>Tour of Heroes</h1>
    <hero-app-main [hero]=hero></hero-app-main>`,
  styles: ['h1 { font-weight: normal; }'],
  directives: [HeroAppMainComponent]
})

或特定的 url

@Component({
  selector: 'hero-details',
  template: `
    <h2>{{hero.name}}</h2>
    <hero-team [hero]=hero></hero-team>
    <ng-content></ng-content>
  `,
  styleUrls: ['app/hero-details.component.css'],
  directives: [HeroTeamComponent]
})

仅使用 Ionic 2 将 CSS 添加到一页

Add CSS to one page only with Ionic 2

css

ionic2