Angular库组件添加SCSS后样式不生效，该如何排查解决？

API 探路者

2026-10-6

问题排查与解决方案

1. 首要问题：类名拼写不一致

你当前的代码存在明显的拼写错误：

mycustom.component.html 中div的类名写为 cutom-div
mycustom.component.scss 中定义的选择器是 .custom-div
二者完全不匹配，直接导致样式无法命中对应元素，先将类名修正为统一写法即可：

<!-- 修正后的mycustom.component.html -->
<div class="custom-div">
    Hello
</div>

2. 拼写修正后仍无效则检查库打包配置

Angular 6+ 自定义库默认使用ng-packagr构建，若样式仍不生效可按以下顺序排查：

确认库项目已安装sass预处理依赖：npm i sass -D，避免构建时scss文件未被正确编译
检查库根目录的ng-package.json配置，确保样式资源被正确打包，参考配置如下：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/my-library",
  "lib": {
    "entryFile": "src/public-api.ts",
    // 若有全局scss变量引用路径可在这里配置
    "styleIncludePaths": ["src/lib/styles"]
  },
  // 若需要单独导出样式文件可添加assets配置
  "assets": ["src/lib/**/*.scss"]
}

如果存在样式封装冲突，可在组件配置中关闭视图封装（谨慎使用，会导致样式全局生效）：

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

@Component({
  selector: "lib-mycustom",
  templateUrl: "./mycustom.component.html",
  styleUrls: ["./mycustom.component.scss"],
  // 新增这一行
  encapsulation: ViewEncapsulation.None
})
export class MycustomComponent implements OnInit {
  constructor() {}
  ngOnInit() {}
}