在angular4中构建时，如何将所有图标放置到一个文件夹中？

我使用cli命令创建了一个应用程序。我的angular-cli.json文件如下所示

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "lienholder"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",       
        "style.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

dist
    -assests
        images
            image1
            image2
        style.css
    -favicon.ico
    -glyphicons-halflings-regular.448c34a56d699c29117a.woff2
    -glyphicons-halflings-regular.448c34a56d699c29117a.svg
    -glyphicons-halflings-regular.448c34a56d699c29117a.ttf
    -glyphicons-halflings-regular.448c34a56d699c29117a.eot
    -glyphicons-halflings-regular.448c34a56d699c29117a.woff
    -index.html
    -inline.bundle.js
    -inline.bundle.js.map
    -main.bundle.js
    -main.bundle.js.map
    -polyfills.bundle.js
    -polyfills.bundle.js.map
    -styles.bundle.js
    -styles.bundle.js.map
    -vendor.bundle.js   
    -vendor.bundle.js.map   

glyphicons-folder
    -glyphicons-halflings-regular.448c34a56d699c29117a.woff2
    -glyphicons-halflings-regular.448c34a56d699c29117a.svg
    -glyphicons-halflings-regular.448c34a56d699c29117a.ttf
    -glyphicons-halflings-regular.448c34a56d699c29117a.eot
    -glyphicons-halflings-regular.448c34a56d699c29117a.woff

现在，当我使用命令构建应用程序时

ng构建--目标=开发--环境=开发

它创建了一个dist文件夹i，其中包含如下所有文件

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "lienholder"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",       
        "style.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

dist
    -assests
        images
            image1
            image2
        style.css
    -favicon.ico
    -glyphicons-halflings-regular.448c34a56d699c29117a.woff2
    -glyphicons-halflings-regular.448c34a56d699c29117a.svg
    -glyphicons-halflings-regular.448c34a56d699c29117a.ttf
    -glyphicons-halflings-regular.448c34a56d699c29117a.eot
    -glyphicons-halflings-regular.448c34a56d699c29117a.woff
    -index.html
    -inline.bundle.js
    -inline.bundle.js.map
    -main.bundle.js
    -main.bundle.js.map
    -polyfills.bundle.js
    -polyfills.bundle.js.map
    -styles.bundle.js
    -styles.bundle.js.map
    -vendor.bundle.js   
    -vendor.bundle.js.map   

glyphicons-folder
    -glyphicons-halflings-regular.448c34a56d699c29117a.woff2
    -glyphicons-halflings-regular.448c34a56d699c29117a.svg
    -glyphicons-halflings-regular.448c34a56d699c29117a.ttf
    -glyphicons-halflings-regular.448c34a56d699c29117a.eot
    -glyphicons-halflings-regular.448c34a56d699c29117a.woff

现在，我想要的是，我想把所有的glyphicons文件放在一个文件夹中，而不是把所有的glyphicons都放在根上，类似这样

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "lienholder"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",       
        "style.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

dist
    -assests
        images
            image1
            image2
        style.css
    -favicon.ico
    -glyphicons-halflings-regular.448c34a56d699c29117a.woff2
    -glyphicons-halflings-regular.448c34a56d699c29117a.svg
    -glyphicons-halflings-regular.448c34a56d699c29117a.ttf
    -glyphicons-halflings-regular.448c34a56d699c29117a.eot
    -glyphicons-halflings-regular.448c34a56d699c29117a.woff
    -index.html
    -inline.bundle.js
    -inline.bundle.js.map
    -main.bundle.js
    -main.bundle.js.map
    -polyfills.bundle.js
    -polyfills.bundle.js.map
    -styles.bundle.js
    -styles.bundle.js.map
    -vendor.bundle.js   
    -vendor.bundle.js.map   

glyphicons-folder
    -glyphicons-halflings-regular.448c34a56d699c29117a.woff2
    -glyphicons-halflings-regular.448c34a56d699c29117a.svg
    -glyphicons-halflings-regular.448c34a56d699c29117a.ttf
    -glyphicons-halflings-regular.448c34a56d699c29117a.eot
    -glyphicons-halflings-regular.448c34a56d699c29117a.woff

我该怎么做

更新

这是如何将文件夹放置在node_modules文件夹中的

---

修改您的

angular cli.json

类似

"assets": [
        "assets",
        "favicon.ico",
        "glyphicons-folder"
      ],

并将所有图标字体复制到该文件夹中

或

在

assets

文件夹中创建一个文件夹

glyphicons文件夹

，这样您就不必这样修改

angular cli.json

。默认情况下，将输出

资产

中的任何内容

但我会做一些类似于

资产/字体/字形图标

assets
config选项的作用是输出文件夹内容或
文件，以便您可以在应用程序中引用该文件。默认情况下
assets
和
favicon.ico
您可以这样配置

更新：
我认为你需要看到这一点：

glyphicons在bootstrap.css中引用。这只是
webpack/AngularCLI正在做它的事情，包括
你的CSS

除了强迫症之外，它在那里并不真的痛，是吗假若
如果确实要删除它，可以改为使用less/sass进行构建。
将bootstrap.less/sass复制到项目中并更改所有导入
要指向正确的文件，请删除@import
“引导/图标”

听起来你现在必须接受它，或者根据上面的评论自己从less/sass构建它。
但这不会破坏你的应用程序，因为你可能为它们定义的路径会不同吗？我在../node\u modules/bootstrap/dist/css/bootstrap.min.css的位置有一个引导文件，我在angular-cli.json文件中添加了它，如“styles”：[“./node_modules/bootstrap/dist/css/bootstrap.min.css”，]，这就是为什么如果我将glyphicons文件移动到assest文件夹中，就会得到glyphicons文件，这会破坏我的css吗？试着运行
ng serve
来测试和检查这一点，如果不起作用请查看我的更新，我已经描述了文件在node_模块中的排列方式，因此如果我使用ng serve命令运行应用程序，它不会破坏，这将是我们尝试构建它时的一个问题，我想更改位置，使其引用文件夹assests/font/glyphicons，而不仅仅是glyphicons。现在正在发生的事情，你知道我该怎么做吗that@LijinDurairaj刚刚更新了答案，听起来好像没有简单的方法可以从
dist
文件夹中删除
glyphicons
，但是它只是一个
dist
文件夹，所以不会有任何伤害。