Is it better to import styles in angular.json or importing in styles.scss?

Admin 1
Viewed 1046

I am trying to add ngx-datatable component to my project and I am learning to do this so I can eventually do this for a big project. There are two methods of adding styles to the datatable and one is by importing in 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';

And the other method is adding it to the styles array property in 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"
            ],

Which would be a better practice? Thank you

angular
1 Answers

If you add your CSS imports in the angular.json file, think of it as adding multiple global css files for your project.

But if you add your CSS imports in the styles.css file, you will have one global stylesheet for your angular project but you will refer multiple stylesheets in it.

I personally refer my stylesheets in the angular.json file as I find it easy to maintain the custom global CSS that I write as apposed to importing multiple global CSS stylesheets such as bootstrap

user_146187890
Related