Почему CSS-файл импортируется в машинописный текст?

Question

В более старой, сложной базе кода, в которой используется Angular 4 с пользовательским веб-пакетом, были некоторые компоненты, которые импортировали файл CSS, так же, как вы импортировали модуль для побочного эффекта.Пример (это полный файл с разными именами переменных):

import { Component, OnInit } from '@angular/core';
import '../../assets/css/styles.css';

@Component({
    selector: 'sidebar-app',
    templateUrl: './sidebar.component.html',
    styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {

    ngOnInit() {
    }
}

styles.css

.content_body {
    padding: 0;
}

.basic_page_wrapper {
    padding: 0;
}

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

import * as s from './Button.css';

Почему файл CSS должен быть импортирован как import '../../assets/css/styles.css'; внутри углового компонента?

Answer 1

При использовании таких упаковщиков, как webpack или browserify , можно импортировать файл CSS, чтобы обработать его и упаковать в тот же пакет, что и модуль JavaScript, который его импортирует.

В веб-пакете это делается с помощью style-loader.Подробнее в этом среднем посте !