为啥我的 Angular 应用程序没有拿起可动手做的 CSS？

Posted 2023-03-22

【中文标题】为啥我的 Angular 应用程序没有拿起可动手做的 CSS？

【英文标题】：Why my angular application is not picking up handsontable css?为什么我的 Angular 应用程序没有拿起可动手做的 CSS？

【发布时间】：2020-11-01 22:52:50

【问题描述】：

在我的 Angular 应用程序中，只有一个组件使用 handsontable，因此 css 不必是应用程序级别的。在组件中，我尝试使用如下语法：

styleUrls: ['./../../../node_modules/handsontable-pro/dist/handsontable.full.min.css']

但它没有效果。最后我不得不将 handsontable.full.min.css 复制到与我的组件相同的文件夹中，引用 styleUrls 如下：

styleUrls: ['./handsontable.full.min.css']

我不喜欢复制，因为这会导致同一个文件位于 2 个位置。 [根据 handsontable 文档][1] 要在应用程序级别声明 css，您必须将其添加到 style.css [1]：https://handsontable.com/docs/7.4.2/frameworks-wrapper-for-angular-installation.html

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

我尝试将这一行依次放入 style.scss 和 style.css 文件中，同样没有效果。 我的 Angular 是 7.1.1，可动手操作的是：

"@handsontable-pro/angular": "3.0.0",
"@handsontable/angular": "^5.1.1",

如何避免制作 2 个可动手操作的 css 副本？

编辑：根据 angular.json

 "styles": ["projects/survey-webapp/src/styles.css"]

根据@spots 的建议，我在其中添加了可操作的 css，但没有成功：

 "styles": [
          "projects/survey-webapp/src/styles.css",
          "node_modules/handsontable-pro/dist/handsontable.full.min.css"
        ],

【参考方案1】：

您是否尝试在angular.json 的styles 数组中添加样式表？我从未使用过 Handsontable，但这是我通常引用 3rd 方样式表的方式，例如 bootstrap 或 ag-grid。

你会想要这样的：

"styles": [
    //other styles...
    "node_modules/handsontable-pro/dist/handsontable.full.min.css",
],

【讨论】：

嗨@spots 感谢您的回答，我按照您的建议进行了尝试，但没有成功。

嗨@spots，它正在工作。早些时候我将 css 路径放在错误的项目下。更正了 - 它正在工作。