在index.html中加载在角度cli-json中定义的特定css文件之间的css文件

Question

我有一些外部样式表从我的index.html中的另一个应用程序引用。

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

我在我的角cli.json下“样式”像

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

    ], 

所述应用程序特定的CSS假设我的应用程序的基础的CSS是“anotherapp.css”具有至包含在“my-application.scss”之前，但在“foundation.scss”之后。

1）如何在这种情况下订购我的css文件？

2）此外，为什么所有在angular-cli.json中定义的css/scss文件在html页面中呈现为内部样式？ （ - 使查看Chrome开发者工具中的源代码变得困难）

谢谢！

Answer 1

我想你总是想得到当前的anotherapp.css，否则你只能将文件保存在app/legacy/css这样的文件夹中并相应地修改styles配置。因此，要始终获得当前的anotherapp.css，您可以使用npm package download-cli并修改一些npm scripts和cli configs。这里是setps：

• npm install -g download-cli
• 添加新的NPM脚本您package.json download": "download --out ./src/app/legacy/css www.anotherapplication.com/css/anotherapp.css"
• 修改ng serve/build/etc脚本像
  "build": "npm run download && ng build",
"serve": "npm run download && ng serve"

• 修改styles的配置，如：

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

要测试download脚本分别只需运行npm run download

提示： 为了进行调试你可以说出您的全球风格包像这样：

"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" } 
    ], 

所以这样的角度CLI而不是只生产单一styles.bundle.js会产生不同的束像foundation.bundle.js，anotherapp.bundle.js和application.bundle.js