Загрузка нескольких таблиц стилей для компонента в Angular2

Question

Я создаю приложение углового2. Я сталкиваюсь с несколькими проблемами, когда я пытаюсь загрузить несколько таблиц стилей для одного и того же компонента. Вот код, что я делаю:

import { Component } from '@angular/core'; 

@Component({ 
selector: 'my-tag', 
templateUrl: 'my-tag.component.html', 
styleUrls: [ 
    './style1.css', 
    './style2.css' 
    ] 
}) 
export class MyTagComponent{} 

Теперь вот мои проблемы:

Когда я пытаюсь включить файл CSS-код из другого каталога, как это:

styleUrls: [ 
    './style1.css', 
    '../public/style2.css' 
] 

Я получаю ошибку

Uncaught Error: Expected 'styles' to be an array of strings.

в консоли браузера.

Затем я включил вторую таблицу стилей style2.css в каталог компонента и написал первый фрагмент. Теперь стиль загружается, но он загружается по всему миру. Вторая таблица стилей имеет имена классов, которые сталкиваются с загрузкой, и вместо стиля начальной загрузки стиль второй стили применяется глобально, т. Е. Шаблоны других компонентов стилизованы из второй таблицы стилей.

Не следует ли использовать URL-адреса, указанные в styleUrls, только на компоненте и не наносить вреда другим компонентам?

Может ли кто-нибудь сказать мне, как загружать несколько файлов css для определенного компонента, не применяя его глобально.

Я также пробовал следующие обходные пути, но стиль применяется ко всем компонентам, которые я создал.

styles: [ 
     require('./style1.css').toString(), 
     require('../public/style2.css').toString() 
] 

P.S. Я использую webpack в качестве модуля для моего проекта.

webpack.config (выдержка)

{ 
    test: /\.css$/, 
    exclude: helpers.root('src', 'app'), 
    loader: ExtractTextPlugin.extract('style', 'css?sourceMap') 
    }, 
    { 
    test: /\.css$/, 
    include: helpers.root('src', 'app'), 
    loader: 'raw' 
    } 

Answer 1

Мы включаем шаблон и CSS файлы, установив свойства templateUrl и styleUrls метаданных соответственно. Поскольку эти файлы совместно расположены с компонентом, было бы неплохо ссылаться на них по имени, не указывая также путь к корню приложения.

Мы можем изменить способ Угловой вычисляет полный URL-адрес, устанавливая свойство moduleId компонента метаданных в module.id.

@Component({ 
    selector: 'my-tag', 
    moduleId: module.id, 
    templateUrl: 'my-tag.component.html', 
    styleUrls: ['style1.css', 'style2.css'] 
}) 
export class MyTagComponent { } 

Update # 1

для WebPack:

Попробуйте использовать 'на струне-загрузчик' для CSS в WebPack конфигурации.

{ test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] } 

Надежда будет работать для вас.

Answer 2

I считаю проблема с аргументом 'style', который вы передаете ExtractPlugin.extract (loader: options | object).Я думаю, что это относится к этому загрузчику: https://github.com/webpack/style-loader, который добавляет тег стиля в DOM и поэтому применит ваши стили во всем мире.

Я столкнулся с этой проблемой на днях и только посмотрел на вышеупомянутое оправдание ради этого сообщения и должен вернуться и исправить это правильно с учетом этого, но я обошел его, просто используя css-loader как это:

{ 
    test: /\.css$/, 
    loader: "css-loader" 
    } 

, а также установки инкапсуляции в ViewEncapsulation.Native и, как вы отметили ранее, называя .ToString() на загруженном CSS. Я полагаю, что ExtractTextPlugin все еще можно использовать вместо удаляемого загрузчика стиля.

Answer 3

Я видел этот подход используется:

@Component({ 
    selector: 'app', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
} 

Где app.component.css имеет несколько импорта в нем, таким образом:

@import url('/assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css'); 
@import url('/assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.css'); 
@import url('/assets/plugins/ionRangeSlider/css/ion.rangeSlider.css'); 
@import url('/assets/plugins/ionRangeSlider/css/ion.rangeSlider.skinNice.css'); 

Я надеюсь, что это помогает.