Angular无法使用angular-cli加载资源文件夹

Question

打开一个新的角度4项目，我试图加载我的资源文件夹，我收到错误

  

net：ERR_ABORTED

我试图从assets.css或assets文件夹中的任何文件中获取此错误。我做错了什么？

我试过这种方式，我仍然没有编译项目

  "styles": [
        "styles.css",
        "assets/fonts/fonts.css",
        "assets/stylesheets/ionicons.min",
        "assets/stylesheets/fonts/fonts.css",
        "assets/stylesheets/bootstrap.css",
        "assets/stylesheets/isotope.css",
        "assets/stylesheets/venobox.css",
        "assets/stylesheets/sinister.css",
        "assets/stylesheets/slimmenu.css",
        "assets/stylesheets/main.css",
        "assets/stylesheets/main-bg.css",
        "assets/stylesheets/main-responsive.css"

    ],

Answer 1

在使用angular-cli构建过程中，会创建一个生产文件夹，因此您的本地文件路径（如资源，字体，样式表或插件/脚本）将会发生变化。

Angular CLI通过在.angular-cli.json中指定这些路径来构建处理此方法。

你会发现一个看起来像这样的部分：

...
"apps": [
    {
        "root": "src",
        "outDir": "dist",
        "assets": [
            "favicon.ico",
            // place the relative paths to your assets, like images, here
        ],
        "styles": [
            "assets/fonts/fonts.css"
        ],
        "scripts": [
            "../node_modules/jquery/dist/jquery.js",
            "assets/javascript/libs/common.js"
        ],
        ...
     }
  ],
  ...

希望它有所帮助。

更新：使用通配符/ globs在某个文件夹中包含多个样式表是不可能的：

  

我们不打算在样式中添加glob支持，因为加载顺序是相关的。相反，只需创建一个文件，按所需顺序导入所有内容并将其放入样式数组中。   资料来源：https://github.com/angular/angular-cli/issues/3069

根据建议，您应该查看SASS或LESS，创建一个主样式表，其中包含正确顺序的所有样式表，并包含生成的css文件。

Answer 2

Try to write your `css`  in `styles.css` and in `component.css`

但是，如果您想使用css library之类的外部bootstrap，请使用npm进行安装，并在angular-cli.json样式部分中传递引用。