Angular无法使用angular-cli加载资产文件夹 [英] Angular cannot load assets folder with angular-cli

问题描述

打开一个新的angular 4项目，我试图加载我的资产文件夹，但出现错误

Opened a new angular 4 project and I'm trying to load my assets folder and I get error

净额:ERR_ABORTED

net: ERR_ABORTED

我正在尝试从资产文件夹中获取fonts.css或任何文件，但出现此错误.我在做什么错了?

I'm trying to get fonts.css or any file from the assets folder and I get this error. what I'm doing wrong?

我尝试过这种方式，但项目仍然无法编译

I tried this way and I still the project not compile

  "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"

    ],

推荐答案

在使用angular-cli进行构建的过程中，将创建一个生产文件夹，因此您到本地文件(如资源，字体，样式表或插件/脚本)的路径将改变.

During your build process with angular-cli a production folder is created, therefore your path to local files (like assets, fonts, stylesheets or plugins / scripts) will change.

Angular CLI通过在.angular-cli.json中指定这些路径来构建一种处理方式.

Angular CLI has a build in way to handle this, by specifiying these paths in the .angular-cli.json.

您将在其中找到类似于以下内容的部分:

There you will find a part that looks like this:

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

希望有帮助.

更新:不能使用通配符/glob在某个文件夹中包含多个样式表:

Update: Using wildcards / globs for including multiple stylesheets in a certain folder is not possible:

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

We're not looking at adding glob support to styles, because loading order is relevant. Instead, just make a single file that imports everything in the order you want and put that in the styles array. Source: https://github.com/angular/angular-cli/issues/3069

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

As suggested, you should look into SASS or LESS, create one main stylesheet which includes all of your stylesheets in the correct order, and include the generated css file.

这篇关于Angular无法使用angular-cli加载资产文件夹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！