如何在 Angular scss 项目中导入 ngx-datatable css 样式答案

【问题标题】：How to import ngx-datatable css styles, inside angular scss project如何在 Angular scss 项目中导入 ngx-datatable css 样式
【发布时间】：2018-08-03 21:36:52
【问题描述】：

我有一个带有 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：对不起我的英语

【问题讨论】：

标签： css angular sass ngx-datatable

【解决方案1】：

在 angular.json 中，我们有可以加载第三方 css 文件的样式属性。

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

【讨论】：

我得到了这个项目！而且 css 工作正常，只是一个问题，如果我将引用放在 angular.json 中，它将全局获取这些 css，是否没有其他方法可以尊重需要样式的组件中的样式隔离？跨度>
这些样式将在运行时附加在 index.html 的 Head Tag 中，这将确保所有其他组件都可以使用它。据我所知，我们只能将视图封装应用于组件 SASS 文件。