styles not picking from angular.json styles array angular 6, but working fine with imports in styles.css

Question

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.

Answer 1

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.

Answer 2

在样式数组中添加 css 后，停止 Angular 项目的本地服务器并重新启动它，简单来说，重新启动当前 Angular 项目的本地服务器

Answer 3

There are two styles object in Angular.json. One in Test and another in Build. Make sure you put under build object. Thanks for pointing out @prady

Answer 4

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

Answer 5

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.