为什么 Handsontable CSS 文件不适用于我的 Angular 前端？答案

【问题标题】：Why are Handsontable CSS files not applying to my Angular Frontend?为什么 Handsontable CSS 文件不适用于我的 Angular 前端？
【发布时间】：2021-12-22 13:24:45
【问题描述】：

我正在尝试向我的 Angular 前端显示 Handsontable。我已经获得了基本示例https://handsontable.com/docs/angular-simple-example/ 在一个全新的 Angular 项目中工作，但是当我将确切的代码添加到我现有的存储库中时，我无法获得必要的 CSS 样式来应用。如果我在浏览器上查看源代码，会导入样式表，但不会将样式应用于元素，从而导致位置错位和表格变形。

源代码如下： table.component.html

<div>
   <hot-table
   [data]="dataset"
   [colHeaders]="true"
   [rowHeaders]="true"
   height="auto"
   licenseKey="non-commercial-and-evaluation">
   <hot-column data="id" [readOnly]="true" title="ID"></hot-column>
   <hot-column data="name" title="Full name"></hot-column>
   <hot-column data="address" title="Street name"></hot-column>
   </hot-table>
</div>

组件：

import { Component } from '@angular/core';
import * as Handsontable from 'handsontable';

@Component({
  selector: 'app-root',
  templateUrl: './table.component.html',
  styleUrls: ['./app.component.css']
})
class AppComponent {
  dataset: any[] = [
    {id: 1, name: 'Ted Right', address: 'Wall Street'},
    {id: 2, name: 'Frank Honest', address: 'Pennsylvania Avenue'},
    {id: 3, name: 'Joan Well', address: 'Broadway'},
    {id: 4, name: 'Gail Polite', address: 'Bourbon Street'},
    {id: 5, name: 'Michael Fair', address: 'Lombard Street'},
    {id: 6, name: 'Mia Fair', address: 'Rodeo Drive'},
    {id: 7, name: 'Cora Fair', address: 'Sunset Boulevard'},
    {id: 8, name: 'Jack Right', address: 'Michigan Avenue'},
  ];
}

样式

@import '~handsontable/dist/handsontable.full.css';

我将不胜感激！

【问题讨论】：

实际的 CSS 是什么样的？ @import 是在 app.component.css、styles.css 还是其他地方？
@Mordred CSS 除了“@import”之外是空的。样式也包含“@import”
尝试在全局css文件中导入css，可能是组件css文件中没有正确导入css。
好的，如果它在 app.component.css 中，你能不能把导入内容本身（或至少一部分）过去？
我还应该说导入路径对我来说很可疑。我的猜测是找不到handsontable.full.css。

标签： css angular typescript handsontable

【解决方案1】：

而不是将其导入styles.css / styles.scss ... 通过将相关的 css 文件添加到 angular.json 的“样式”属性中，将 CSS 添加到您的角度构建中

这应该看起来像这样：

"styles": [
  "node_modules/handsontable/dist/handsontable.full.css",
  "src/styles.scss"
]

您将需要重新启动 Angular 开发服务器以获取此更改。

注意：angular.json 中有 2 个“样式”属性 - 请确保仅将其添加到第一个或同时添加。

【讨论】：