Добавить CSS на одну страницу только с помощью Ionic 2

Question

Я знаю, что в Ionic 2 Я могу написать код стиля в файлах SCSS для конкретных страниц в /app/pages/page-name/page-name.scss, а затем включить ссылки на них в /app/theme/app.core.scss. Однако таким образом коды стиля, специфичные для страницы, входят в полный файл стиля приложения, увеличивая его размер даже на страницах, к которым многие пользователи никогда не смогут получить доступ.

Как создать код стиля (либо внутри собственного CSS/SCSS-файла, либо внутри блока стиля на отображаемой странице), который включен только в одну конкретную страницу? Это даже рекомендуется в Ionic?

Answer 1

Это не рекомендуется в ионическом и я не очень понимаю, что это преимущество делает это, потому что стили затем уменьшенной, поэтому размер конечного файла стиль не будет снижен что много (и вам придется изменить много вещей до , попробуйте, чтобы заставить его работать именно так).

Несмотря на то, что вы можете изменить свой gulpfile.js, чтобы изменить способ его работы по умолчанию (минимизация и объединение всех ваших стилей в один файл), чтобы каждый файл scss (принадлежащий одной странице) был собраны в одном css файла на странице (находится в папке www/styles), а затем импортировать их в каждом ionic page's html с

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

вам придется импортировать эти стили в body из html page (потому что ионные приложение получает загружен внутри <ion-app></ion-app>, который находится внутри body страницы index.html).

Как вы можете видеть here, который работает во всех современных браузерах, но я уверен, что это не рекомендуемый способ работы с Ionic, и я не думаю, что это стоит усилий.

Answer 2

См angular2 документацию, не уверен, что он будет работать с шаблонами URL-адрес, не изменяя gulpfile но это должно вам начать
=>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] 
})