CSS не входит в комплект Webpack с Angular 2

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

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

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

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

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

2 ответа

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

    Например, ниже приведена структура моей папки..

    Введите описание изображения здесь

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

    @Component({
      selector: 'my-app',
       templateUrl: 'src/app/sub.component.html',
     styleUrls: ['src/app/app.component.css']
    
    })
    
    export class AppComponent {
    
    }
    
  2. Вам нужно использовать ‘style-loader’, который поместит ваш css-файл в тег style в вашем индексе.HTML-страница.

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

    ‘css-loader’ обрабатывает ваши css файлы, а затем ‘style-loader’ помещает их в тег style страницы.