用Swiip/generator-gulp-angular如何添加自定义的bootstrap

发布于 2022-09-02 00:44:12 字数 1084 浏览 10 评论 0

我用Swiip/generator-gulp-angular生成的项目来开发,一开始用的是从bower下载的bootstrap,经过gulp build,可以和其他依赖文件合并为一个css文件和一个js文件。但是我并不需要完整的bootstrap,我从官网也看到bootstrap是可以定制的,我定制完成后,下载得到bootstrap.css。我在index.html里手动插入link来引用bootstrap.css如下:

  <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

  <!-- build:css({.tmp/serve,src}) styles/vendor.css -->
  <!-- bower:css -->
  <!-- run `gulp inject` to automatically populate bower styles dependencies -->
  <!-- endbower -->
  <link rel="stylesheet" href="bower_components/bootstrap/css/bootstrap.css">
  <!-- endbuild -->
  <!-- build:css({.tmp/serve,src}) styles/app.css -->
  <!-- inject:css -->
  <!-- css files will be automatically insert here -->
  <!-- endinject -->
  <!-- endbuild -->

这样做在运行gulp serve时没问题,但是运行gulp build就出问题了,这个bootstrap.css并没有合并到最终的css文件里,被忽略了,请做过的人告诉我该如何实现,多谢

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

世界如花海般美丽 2022-09-09 00:44:12

首先,bootstrap是通过wiredep插件注入的,你如果不想使用原生的bootstrap的话,你可以在bower.json中,修改它的路径,指向你的文件, 请看overrides中的bootstrap中的路径:

{
  "name": "test",
  "version": "0.0.0",
  "dependencies": {
    "angular-animate": "~1.4.2",
    "angular-cookies": "~1.4.2",
    "angular-touch": "~1.4.2",
    "angular-sanitize": "~1.4.2",
    "angular-messages": "~1.4.2",
    "angular-aria": "~1.4.2",
    "jquery": "~2.1.4",
    "angular-ui-router": "~0.2.15",
    "bootstrap": "~3.3.5",
    "angular-bootstrap": "~0.13.4",
    "malarkey": "yuanqing/malarkey#~1.3.1",
    "angular-toastr": "~1.5.0",
    "moment": "~2.10.6",
    "animate.css": "~3.4.0",
    "angular": "~1.4.2"
  },
  "devDependencies": {
    "angular-mocks": "~1.4.2"
  },
  "overrides": {
    "bootstrap": {
      "main": [
        "dist/css/bootstrap.css",
        "dist/fonts/glyphicons-halflings-regular.eot",
        "dist/fonts/glyphicons-halflings-regular.svg",
        "dist/fonts/glyphicons-halflings-regular.ttf",
        "dist/fonts/glyphicons-halflings-regular.woff",
        "dist/fonts/glyphicons-halflings-regular.woff2"
      ]
    }
  },
  "resolutions": {
    "jquery": "~2.1.4",
    "angular": "~1.4.2"
  }
}

刚好我最近也在玩这个,有兴趣的话,一起研究研究
https://github.com/hjzheng/angular-es6-practice

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文