Loading css files in index.html in between certain css files defined in angular cli-json

Question

I have some external stylesheets referring from another application in my index.html.

    <link href = "www.anotherapplication.com/css/anotherapp.css">

I have the application specific css in my angular-cli.json under "styles" like

  "styles": [
    "../node_modules/foundation-sites/assets/foundation.scss",
    "my-application.scss"

  ],

Assuming that the base css for my application is the "anotherapp.css" that has to be included before "my-application.scss" but after "foundation.scss".

1) How do I order my css files in this case?

2) Also, Why is it that all the css/scss files defined in the angular-cli.json rendered as internal styles in the html page? (- making it difficult to view source in the chrome developer tools)

Thanks!

angularconsulting.au · Accepted Answer · 2017-09-01 00:39:17Z

1

I guess you always want to get the current anotherapp.css, otherwise you could of just save the file in the folder like app/legacy/css and modify styles config accordingly. So to always get the current anotherapp.css you can do by using npm package download-cli and modifying some npm scripts and cli configs. Here is the setps:

npm install -g download-cli
add new npm script to your package.json download": "download --out ./src/app/legacy/css www.anotherapplication.com/css/anotherapp.css"
modify your ng serve/build/etc script like
"build": "npm run download && ng build",
"serve": "npm run download && ng serve"
modify your styles config like:

"styles": [
"../node_modules/foundation-sites/assets/foundation.scss",
"app/legacy/css/anotherapp.css",
"my-application.scss"
],

To test the download script separately just run npm run download

Tip: For debugging purposes you can name your global style bundles like so:

"styles": [
    { "input": "../node_modules/foundation-sites/assets/foundation.scss", "output": "foundation" },
    { "input": "app/legacy/css/anotherapp.css", "output": "anotherapp" }
    { "input": "my-application.scss", "output": "application" }
  ],

So this way angular cli instead of just producing one single styles.bundle.js will produce separate bundles like foundation.bundle.js, anotherapp.bundle.js and application.bundle.js

edited Sep 1, 2017 at 0:39

answered Aug 31, 2017 at 2:50

angularconsulting.au

28.5k14 gold badges91 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gsm Over a year ago

Hi, Thank you for your reply. But my question is that - How would I order my css files where "foundation.scss" comes first, then "anotherapp.scss" as second and then "my-application.scss" as third where the first css file and third css file are defined inside angular-cli.json and the second css comes from an external css file defined in the index.html?

angularconsulting.au Over a year ago

@Gsm I think I came up with the solution for you, just check the updated answer.

Gsm Over a year ago

Thanks a ton! So, I did all the steps that you have mentioned but just a quick question to confirm: U meant 'current' anotherapp.css - Does it mean that the anotherapp.css in my app/legacy/css will get updated automatically as and when there is the update in the external css file from the website? i.e., whenever i run ng serve?

Collectives™ on Stack Overflow

Loading css files in index.html in between certain css files defined in angular cli-json

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related