时间戳

首页 > 解决方案 > 为什么我的 Angular 应用程序没有拿起可动手做的 CSS？

css - 为什么我的 Angular 应用程序没有拿起可动手做的 CSS？

问题描述

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

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

但它没有效果。最后我不得不将 handontable.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-安装.html

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

我尝试将这一行依次放在 style.scss 和 style.css 文件中，也没有效果。我的 Angular 是 7.1.1 & handsontable 是：

"@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"
        ],

标签： cssangularhandsontable

解决方案

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

你会想要这样的东西：

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

推荐阅读