Question

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

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

我的angular-cli.json中的应用程序特定的css位于“样式”下，如

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

  ],

假设我的应用程序的基本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配置。因此，要始终使用npm package download-cli并修改某些anotherapp.css和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

在angular.html中加载css文件在angular cli-json中定义的某些css文件之间

1 个答案: