0

I have an Angular project with scss styles ext

angular.json

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

Then, i have a component that need to use ngx-datatable with themeing, so I import the css files

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

With this code, I dont get the theme working. And I dont get any error of something. I try this then, after reading a similar question 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";

But in this case, the paths to the fonts inside ngx-datatables css, get messy 

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'

(the fonts of course are in place, and I don´t have touched the css files of ngx)

Im out of ideas.... can someone point me the right direction?

PD:Sorry my english

Aferrercrafter
  • 319
  • 1
  • 6
  • 14

1 Answers1

8

In angular.json, we have styles property which will allow to load third party css files. 

"styles": [
     "node_modules/angular-calendar/dist/css/angular-calendar.css"
],
Suresh Kumar Ariya
  • 9,516
  • 1
  • 18
  • 27
  • I get the project working with this! And the css are working fine, just a question, if I put the reference in the angular.json, its going to get those css globally, is there no other way that respect the styles isolation in the component that needs the style? – Aferrercrafter Aug 03 '18 at 13:56
  • 2
    These styles will be attached in the Head Tag of your index.html at run time which will make sure all other components can use it. As far as i know, we can apply View Encapsulation only to the component SASS files. – Suresh Kumar Ariya Aug 03 '18 at 14:04