如何在Angular 5组件中通过styleUrls引入父应用外部CSS文件？

嘿，这个需求完全是可行的，但具体实现要根据父应用CSS文件的实际访问路径来调整，给你几个经过验证的实用方法：

方法一：直接在styleUrls中指定路径 #

你可以直接把父应用的CSS文件路径添加到组件的styleUrls数组里，支持相对路径和绝对路径两种写法：

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: [
    './my-form.component.css', // 组件自身的样式文件
    '../../css/common.css'     // 相对路径：根据你的目录层级调整，比如父应用CSS在两级以上的目录
    // 或者用绝对路径：'/parent-app-resources/css/common.css'，要和部署后的实际URL匹配
  ]
})

⚠️ 注意：部署后要确保这个路径能正确访问到父应用的CSS文件，因为你的Angular应用在子目录里，相对路径一定要算准层级关系。

方法二：在组件CSS中用@import导入 #

如果觉得styleUrls里堆路径不够清晰，也可以在组件的专属CSS文件里用@import导入父应用的CSS：

/* my-form.component.css */
@import '../../css/common.css'; /* 同样要注意路径的正确性 */

/* 下面写组件自身的样式 */
.my-form-container {
  padding: 16px;
}

这种方式把所有外部样式的导入集中在一个文件里，后期维护起来更方便。

注意Angular的样式隔离机制 #

默认情况下，Angular组件启用ViewEncapsulation.Emulated模式，会给组件内的DOM元素添加专属属性，让组件样式只作用于自身DOM。如果你导入的父应用CSS需要完全作用于组件内的元素，这个模式是没问题的——导入的CSS会被自动加上专属属性，不会影响组件外的内容。

但如果父应用的CSS里有一些全局选择器（比如body、div），你希望它们在组件内也能生效，或者想让导入的CSS完全不受隔离限制，可以把组件的encapsulation设置为ViewEncapsulation.None：

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

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css', '../../css/common.css'],
  encapsulation: ViewEncapsulation.None
})

⚠️ 谨慎使用这个设置！因为它会让组件的所有样式（包括导入的父应用CSS）变成全局样式，可能意外影响到其他组件或父应用的内容。

内容的提问来源于stack exchange，提问作者L Y E S - C H I O U K H