时间戳

首页 > 解决方案 > 为什么要将 CSS 文件导入打字稿？

css - 为什么要将 CSS 文件导入打字稿？

问题描述

在使用 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() {
    }
}

样式.css

.content_body {
    padding: 0;
}

.basic_page_wrapper {
    padding: 0;
}

我从未见过在 typescript 中导入 css，而我发现的所有其他示例都以某种方式使用了这些样式，例如

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

为什么要像import '../../assets/css/styles.css';在 Angular 组件中一样导入 css 文件？

标签： cssangulartypescriptecmascript-6

解决方案

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

在 webpack 中，这是使用style-loader. 在这篇中等帖子中阅读更多内容！

推荐阅读