Question

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

如何在一个特定页面中创建样式代码（在其自己的CSS / SCSS文件中，或在呈现页面中的样式块内）？在Ionic中是否建议这样做？

Answer 1

请参阅angular2文档，不确定它是否可以在不修改gulpfile的情况下使用url模板，但这应该可以帮助您开始使用 =＆GT; 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]
})

或特定网址

@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]
})

Answer 2

在Ionic中不推荐这样做，我不明白这样做的好处是什么，因为这些风格是缩小，所以最终的样式文件不会被减少（并且你必须修改很多东西到尝试以使其以这种方式工作）。

尽管如此，您可以修改gulpfile.js以便在默认情况下更改其工作方式（缩小并将所有样式放在一个文件中）以生成每个scss文件（归属）每页编译一个css文件（位于www/styles文件夹中），然后在每个ionic page's html中使用

导入它们

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

您必须在body的{{1}}中导入这些样式（因为Ionic应用加载在html page内<ion-app></ion-app>内body页面）。

正如您所看到的here适用于所有现代浏览器，但我确定这不是推荐使用index.html的方法，而且我不会这样做。认为值得付出努力。

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

2 个答案: