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

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!

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