Question

我有一个使用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": {}
  }
}

现在当我使用命令

构建应用程序时

ng build --target = development --environment = dev

它会创建一个dist文件夹，其中包含以下所有文件

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，我想将所有glyphicons文件放在一个文件夹中，类似这样的

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文件夹中的方式

Answer 1

修改您的angular-cli.json

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

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

或者

在glyphicons-folder文件夹中创建文件夹assets，这样您就不必以这种方式修改angular-cli.json。默认情况下，assets内的任何内容都会被输出。

但我会做assets/fonts/glyphicons

之类的事情

它是assets配置选项输出文件夹内容还是a 文件，以便您可以引用它在您的应用程序中。默认情况下您可以通过这种方式配置assets和favicon.ico。

<强>更新我想你需要看到这个https://github.com/angular/angular-cli/issues/6147#issuecomment-298858109：

glyphicons在bootstrap.css中引用。这只是   webpack / AngularCLI做的事情包括所需的所有文件   你的CSS。

除了强迫症之外它没有真正受伤，是吗？：p如果   你真的想要删除它，你可以用less / sass来构建。   将bootstrap.less / sass复制到您的项目中并更改所有导入   指向正确的文件然后删除@import   “自举/ glyphicons”;

听起来你现在必须忍受这种情况，或者根据上述评论自己建立它。

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

1 个答案: