在 Angular4 中构建时,如何将所有字形放置到一个文件夹中?

2024-03-30

我有一个使用 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 文件夹 i,其中包含以下所有文件

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

我怎样才能做到这一点?

UPDATE

这就是文件夹放置在 node_modules 文件夹中的方式


修改你的angular-cli.json like

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

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

Or

创建文件夹glyphicons-folder inside assets文件夹,这样你就不必修改你的angular-cli.json这边走。无论里面有什么assets默认情况下会输出。

但我会做类似的事情assets/fonts/glyphicons

What assets配置选项是输出文件夹内容还是 文件,以便您可以在应用程序中引用它。默认情况下assets and favicon.ico你就这样配置了。

UPDATE:我想你需要看看这个https://github.com/angular/angular-cli/issues/6147#issuecomment-298858109 https://github.com/angular/angular-cli/issues/6147#issuecomment-298858109:

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

除了强迫症之外,它的存在并没有什么真正的伤害,不是吗? :p 如果 如果你真的想删除它,你可以从 less/sass 构建。 将 bootstrap.less/sass 复制到您的项目中并更改所有导入 指向正确的文件然后删除@import “引导程序/字形”;。

听起来你现在必须忍受这一点,或者根据上面的评论自己从 less/sass 构建它。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 Angular4 中构建时,如何将所有字形放置到一个文件夹中? 的相关文章

随机推荐