How can i place all the glyphicons to one folder w

2019-05-18 11:31发布

问题:

i have a application created using cli command. my angular-cli.json file looks like this

{
  "$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": {}
  }
}

now when i build the applicaiton using the command

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

it creates a dist folder i which have all the following files like this

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   

now, wht i want is, instead of having all the glyphicons on the root, i want to place all the glyphicons file inside a folder, something like this

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

how can i do that?

UPDATE

this is how the folder is placed inside the node_modules folder

回答1:

Modify your angular-cli.json like

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

And copy all your icon fonts in to that folder.

Or

Create a folder glyphicons-folder inside assets folder so you do not have to modify your angular-cli.json this way. Whatever is inside assets is gets outputed by default.

But I would do something like assets/fonts/glyphicons

What assets config option does it is outputs the folder content or a file so you can reference that as it is in you app. By default assets and favicon.ico you get configured this way.

UPDATE: I think you need to see this https://github.com/angular/angular-cli/issues/6147#issuecomment-298858109:

glyphicons is referenced in bootstrap.css. This is just webpack/AngularCLI doing it's thing including all files needed for your CSS.

It doesn't really hurt that it's there other than OCD, does it? :p If you really want to remove it you could build from less/sass instead. Copy bootstrap.less/sass into your project and change all the imports to point to the correct files then remove @import "bootstrap/glyphicons";.

Sounds like you have to live with that for now or build it from less/sass yourself as per comment above.