且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-09-30 09:47:40

在您使用 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

按照建议,您应该查看 SASSLESS,创建一个主样式表,其中以正确的顺序包含所有样式表,并包含生成的 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.