如何在Angular Scss项目中导入ngx-datatable CSS样式

Question

我有一个带有scss样式扩展的Angular项目

angular.json

"schematics": {
    "@schematics/angular:component": {
        "styleext": "scss"
    }
},...

然后，我有一个需要在主题中使用ngx-datatable的组件，因此我导入了css文件

result.component.ts

@Component({
  providers: [HintService],
  selector: 'app-result',
  styleUrls: [
    'result.component.scss',
    '../../../../../node_modules/@swimlane/ngx-datatable/release/index.css',
    '../../../../../node_modules/@swimlane/ngx-datatable/release/themes/material.css',
    '../../../../../node_modules/@swimlane/ngx-datatable/release/themes/bootstrap.css',
    '../../../../../node_modules/@swimlane/ngx-datatable/release/assets/icons.css'
  ],
  templateUrl: 'result.component.html'
})

使用此代码，我无法使主题正常工作。而且我没有任何错误。在阅读类似问题之后，我尝试了此操作在SCSS文件中导入常规CSS文件

result.component.scss

@import "../../../_custom.scss";
@import "~node_modules/@swimlane/ngx-datatable/release/index";
@import "~node_modules/@swimlane/ngx-datatable/release/themes/material";
@import "~node_modules/@swimlane/ngx-datatable/release/themes/bootstrap";
@import "~node_modules/@swimlane/ngx-datatable/release/assets/icons";

但是在这种情况下，ngx-datatables css中字体的路径变得混乱

ERROR in ./src/app/menu/transaction/result/result.component.scss
(Emitted value instead of an instance of Error) CssSyntaxError: C:\TeamProjects\Web\Dev\Portal\node_modules\@swimlane\ngx-datatable\release\assets\icons.css:9:4: Can't resolve 'fonts/data-table.svg' in 'C:\Projects\Web\Dev\Portal\src\app\menu\transaction\result'

（字体当然就位了，我没有碰过ngx的css文件）

我没有主意...。有人可以为我指出正确的方向吗？

PD：对不起我的英语

Answer 1

在angular.json中，我们具有styles属性，该属性将允许加载第三方css文件。

"styles": [
     "node_modules/angular-calendar/dist/css/angular-calendar.css"
],