Angular 12库构建时CSS样式未引入，组件无样式问题求助

问题分析 #

你遇到的问题是Angular组件库构建时，组件配置的单独样式表未被打包进最终产物，导致使用组件时无样式。这是因为ng-packagr对组件级样式的处理逻辑和常规Angular应用不同——常规应用会自动打包组件样式，但库构建需要额外配置或调整写法。

具体解决方案 #

方案1：内联组件样式（最直接） #

将组件样式文件的内容直接写入组件元数据的styles数组，Angular会把样式和组件代码绑定，构建时不会丢失：

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

@Component({
  selector: 'stat-table',
  templateUrl: './stat-table.component.html',
  styles: [`
    table {
      margin: auto;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    
    tr {
      border: none;
      font-size: small;
    }
    
    tr:nth-child(even) {
      background-color: #ddd;
    }
    
    td,
    th {
      padding: 10px;
    }
    
    th {
      background-color: #ecf9f3;
    }
  `]
})
export class StatTableComponent implements OnInit {
  @Input() dataArray?: any[];
  @Input() titleArray?: string[];

  constructor() { }

  ngOnInit(): void {
  }

  originalOrder = (a: KeyValue<number,string>, b: KeyValue<number,string>): number => {
    return 0;
  }
}

方案2：配置ng-packagr处理组件样式 #

如果想保留单独的样式文件，需调整ng-package.json确保组件样式被正确打包：

1. 修改ng-package.json，添加样式目录到styleIncludePaths：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/library-name",
  "lib": {
    "entryFile": "src/public-api.ts",
    "styleIncludePaths": ["./src/lib"]
  }
}

2. 构建完成后，在dist/library-name目录下会生成组件对应的css文件。使用库时，需要在应用的angular.json的styles数组中引入该文件：

"styles": [
  "src/styles.css",
  "./node_modules/library-name/lib/stat-table/stat-table.component.css"
]

方案3：全局样式聚合（适合多组件库） #

如果库包含多个组件，可以创建全局样式文件聚合所有组件样式：

1. 在库的src/lib目录下创建styles.scss，导入组件样式：

@import './stat-table/stat-table.component.css';

2. 修改ng-package.json将该文件作为资源打包：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/library-name",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "assets": ["./src/lib/styles.scss"]
}

3. 用户使用库时，只需在应用的styles.scss中导入全局样式：

@import '~library-name/styles.scss';

为什么之前的配置无效 #

你之前在ng-package.json中配置的"./styles.scss"路径可能指向错误，且该配置是用于打包全局资源文件，而非处理组件级的styleUrls引用，因此组件的单独样式未被纳入构建流程。

内容的提问来源于stack exchange，提问作者cozybutmessy