如何在 angular scss 项目中导入 ngx-datatable css 样式

Question

我有一个带有 scss 样式 ext

的 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'
})

使用此代码，我无法使主题正常工作。而且我没有得到任何错误。在阅读了类似的问题 Import regular CSS files in SCSS file

之后，我尝试了这个

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 中，我们有样式属性允许加载第三方 css 文件。

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

如何在 angular scss 项目中导入 ngx-datatable css 样式

How to import ngx-datatable css styles, inside angular scss project

css

sass

ngx-datatable

angular