CSS не входит в Webpack сверток с угловым 2

Question

Я работаю с угловыми 2 и пытаюсь включить CSS, на который ссылается внутри компонента:

@Component({ 
    selector: 'app', 
    encapsulation: ViewEncapsulation.None, 
    styleUrls: [ 
    './app.component.css' 
    ], 

я включил следующую строку в конфигурации WebPack:

{ 
     test: /\.css$/, 
     loader: 'to-string-loader!css-loader' 
    } 

Однако css не применяется к компоненту.

Answer 1

Вы должны обратиться путь от базовой корневой папки ..

Для примера Ниже моя структура папок ..

тогда мой код будет выглядеть

@Component({ 
    selector: 'my-app', 
    templateUrl: 'src/app/sub.component.html', 
styleUrls: ['src/app/app.component.css'] 

}) 

export class AppComponent { 

} 

Answer 2

Вам необходимо использовать 'style-l oader ', который поместит ваш файл css в тег стиля на странице index.html.

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

«CSS-погрузчик» обрабатывать ваши CSS файлы, а затем «стиль-погрузчик» поместить их в тег стиль страницы.