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

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 是必须包含在“my-application.scss”之前但在“foundation.scss”之后的“anotherapp.css”。

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

因此，这样 Angular cli 而不是只生成一个 styles.bundle.js 将生成单独的包，例如 foundation.bundle.js、anotherapp.bundle.js 和 application.bundle.js