CODEWITHSUNDEEP
angularangular-cliprimeng
user1729972
user1729972

Reputation: 886

What is the right way to include multiple stylesheets in .angular-cli.json?

I'm following instructions as https://yakovfain.com/2016/10/28/adding-primeng-ui-components-to-angular-cli-project/.

With the default contents of :

"styles": [   

   "styles.css"  
]

ng serve command works. As soon as I include the additional stylesheets thus:

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

I get the error:

Parsing .angular-cli.json failed. Please make sure your .angular-cli.json is valid JSON. Error:
SyntaxError: Unexpected token / in JSON at position 630
InvalidConfigError: Parsing .angular-cli.json failed. Please make sure your .angular-cli.json is valid JSON. Error:
SyntaxError: Unexpected token / in JSON at position 630
at InvalidConfigError (C:\xampp\htdocs\myapp1\node_modules\@angular\cli\models\config\config.js:10:9)
at Function.fromConfigPath (C:\xampp\htdocs\myapp1\node_modules\@angular\cli\models\config\config.js:74:19)
at Function.fromProject (C:\xampp\htdocs\myapp1\node_modules\@angular\cli\models\config.js:91:46)
at Object.<anonymous> (C:\xampp\htdocs\myapp1\node_modules\@angular\cli\commands\build.js:7:35)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)

I've looked at other stackoverflow entries and this format seems to be correct so how do I fix this?

Upvotes: 1

Views: 2858

Answers (1)

Pramod Patil
Pramod Patil

Reputation: 2763

You have to add all the node modules css in angular-cli.json so that it can be compiled at very first stage.

 "styles": [
        "./styles.scss",
        "../node_modules/angular2-toaster/toaster.css",
        "../node_modules/font-awesome/css/font-awesome.css",
        "../node_modules/@swimlane/ngx-datatable/release/datatable.css",
        "../node_modules/@swimlane/ngx-datatable/release/material.css",
        "../node_modules/@swimlane/ngx-datatable/assets/icons.css"
      ],

Upvotes: 1

Related Questions