13

I included some styles in angular.json styles array like below:

 "styles": [
              "src/styles.css",
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeng/resources/themes/omega/theme.css",
              "node_modules/primeng/resources/themes/bootstrap/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/font-awesome/css/font-awesome.css"
            ]

but its not picking styles, as i cant see primeng table styling and other styles. although it works fine if i import styles in my styles.css file like below:

@import '../node_modules/primeng/resources/themes/omega/theme.css';
 @import '../node_modules/primeng/resources/themes/bootstrap/theme.css';
 @import '../node_modules/primeicons/primeicons.css'

i believe any of the above methods we can use, let me know if this is not correct.

i also restarted ng serve multiple times.

Any help is appreciated. thanks in anticipation.

I am using angular 6 as its obvious from angular.json, also let me know if any other code or info has to be shared.

prady
  • 416
  • 2
  • 6
  • 17

5 Answers5

1

In my case the reason was trivial, but actually took a lot of time to find.

Styles were not working, because I was putting them in the styles attribute under test section.

Make sure you add styles under build section.

Bartosz546
  • 95
  • 5
0

You can also leave the .angular.cli.json like as it is 

 "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "../node_modules/primeng/resources/primeng.min.css",
        "../node_modules/primeng/resources/themes/omega/theme.css",
        "styles.scss"
      ],

The order of the styles matter. In the above example. Bootstrap css will be applied first followed by primeng themes and finally your custom scss file. Eventually, styles.scss will override all other styles. And no need to import any where.

Ragavan Rajan
  • 4,171
  • 1
  • 25
  • 43
0

After adding the css in styles array stop the local server of your angular project and start it again, In simple words restart the local server of the current angular project

Alok Adhao
  • 447
  • 5
  • 6
0

Try to give the proper path with respect to your component location

Sathyapriya Prabhakaran
  • 9
  • 3
  • This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/33023086) – configbug Oct 31 '22 at 17:23
0

This will be working fine if you restart your project, then run npm start. This is not a issue or bug, when you add library or script in angular.json file you must restart your project.

Adriaan
  • 17,741
  • 7
  • 42
  • 75
Maaz Khan
  • 1
  • 1