Angular 项目中导入 styles 文件到 Component 中的技巧

2023-10-12 09:57:29

有一个单独的 css 文件，专门用来存放 Component 相关的样式。但是，如果你发现你有一个特定的样式，需要在多个 Component 中使用，又或者你想创建一个全局的样式文件，那么你就可以将它导入到 Component 中。

当然，在导入 styles 文件之前，我们需要先找到该文件的物理路径。一般的，在 Angular 项目中，这些 styles 文件通常会存放在 src/styles 文件夹中。

不过，如果你是一个有经验的 Angular 开发者，你可能会发现，styles 文件夹中有很多类似 styles.component.scss 的文件。这些文件是 Angular CLI 自动生成的，它们与 Component 的名称相关联。

因此，如果我们要导入一个 styles 文件，我们只需要知道它的名称和物理路径即可。例如，如果我们想导入 src/styles/custom.css 文件，那么我们就可以使用以下语句：

<link rel="stylesheet" href="custom.css">

将其添加到 index.html 文件中。

或者，你也可以使用以下方法将其导入到 Component 中：

import { Component, OnInit } from '@angular/core';

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

  constructor() { }

  ngOnInit(): void {
  }

}

但是，需要注意的是，当你使用后者方法导入 styles 文件时，你必须确保在 styles 数组中指定 styles 文件的名称，否则它将无法被正确导入。

此外，你也可以使用动态导入的方式来导入 styles 文件。这在某些情况下很有用，例如，你想在运行时加载样式文件。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styles: []
})
export class MyComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
    this.loadStyles();
  }

  private loadStyles() {
    const head = document.getElementsByTagName('head')[0];
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'custom.css';
    head.appendChild(link);
  }

}