angular - 为什么一个 CSS 文件会被导入到 TypeScript 中？

在一个使用 Angular 4 和自定义 Webpack 的较旧、复杂的代码库中，有一些组件会导入一个 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;
}

我从未见过在 TypeScript 中导入 CSS，而我找到的其他所有示例都会以某种方式使用这些样式，例如

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

为什么一个 CSS 文件会像 import '../../assets/css/styles.css'; 这样在 Angular 组件中被导入？

答案＃1

在使用诸如 webpack 或 browserify 这样的打包工具时，人们可能会导入一个 CSS 文件，以便处理它并将其打包到与导入它的 JavaScript 模块相同的包中。

在 webpack 中，这是使用 style-loader 完成的。更多内容请阅读这篇 Medium 文章！