在 angular.json 中导入样式好还是在 styles.scss 中导入样式更好？

Question

我正在尝试将 ngx-datatable 组件添加到我的项目中，并且我正在学习这样做，以便我最终可以为一个大项目做到这一点。有两种向数据表添加样式的方法，一种是导入styles.scss：

@import '~@swimlane/ngx-datatable/index.css';
@import '~@swimlane/ngx-datatable/themes/material.scss';
@import '~@swimlane/ngx-datatable/themes/dark.scss';
@import '~@swimlane/ngx-datatable/themes/bootstrap.scss';
@import '~@swimlane/ngx-datatable/assets/icons.css';

另一种方法是将其添加到styles数组属性中angular.json：

"styles": [
              "src/styles.scss",
              "./node_modules/@swimlane/ngx-datatable/index.css",
              "./node_modules/@swimlane/ngx-datatable/themes/material.scss",
              "./node_modules/@swimlane/ngx-datatable/themes/dark.scss",
              "./node_modules/@swimlane/ngx-datatable/themes/bootstrap.scss",
              "./node_modules/@swimlane/ngx-datatable/assets/icons.css"
            ],

哪一个是更好的做法？谢谢

Answer 1

如果您在文件中添加 CSS 导入angular.json，请将其视为为您的项目添加多个全局 css 文件。

但是，如果您在文件中添加 CSS 导入styles.css，您的 Angular 项目将拥有一个全局样式表，但您将在其中引用多个样式表。

我个人在文件中引用我的样式表，angular.json因为我发现维护我编写的自定义全局 CSS 很容易，而不是导入多个全局 CSS 样式表，例如bootstrap