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

问题描述

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

<块引用>

净值:ERR_ABORTED

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

这个方法我试过了，还是编译不通过

 "样式": ["styles.css","资产/字体/fonts.css","资产/样式表/ionicons.min","资产/样式表/字体/fonts.css","资产/样式表/bootstrap.css","资产/样式表/isotope.css","资产/样式表/venobox.css",资产/样式表/险恶的.css"，"资产/样式表/slimmenu.css","资产/样式表/main.css","assets/stylesheets/main-bg.css",资产/样式表/main-responsive.css"],

解决方案

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

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

在那里你会发现一个看起来像这样的部分:

<预><代码>...应用": [{"root": "src","outDir": "dist",资产":["favicon.ico",//在这里放置你的资产的相对路径，比如图像],风格":[资产/字体/fonts.css"],脚本":["../node_modules/jquery/dist/jquery.js",资产/javascript/libs/common.js"],...}],...

希望有帮助.

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

<块引用>

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

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

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

net: ERR_ABORTED

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"

    ],

解决方案

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

Hope it helps.

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

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

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屋！