首页 文章

Angular 2不导入Bootstrap css

提问于
浏览
4

直接来自https://angular.io/docs/ts/latest/guide/forms.html

让我们添加样式表 . 在应用程序根文件夹中打开一个终端窗口并输入命令:npm install bootstrap --save打开index.html并将以下链接添加到头部 . link rel =“stylesheet”href =“node_modules / bootstrap / dist / css / bootstrap.min.css”>

但是,我一直得到404

GET http:// localhost:4200 / node_modules / bootstrap / dist / css / bootstrap.min.css

当我使用在线地址添加脚本时它可以工作,但为什么angular无法找到我的文件的路径?

4 回答

  • 16

    index.htmlnode_modules 在同一目录中时,它正在工作 .

    从angular-CLI put添加bootstrap

    'bootstrap/dist/**/*.+(js|css.map|css|eot|svg|ttf|woff|woff2)'

    angular-cli-build.js 并运行 ng build

  • 4

    如果您正在使用 angular-cli ,则可以转到 root/styles.css 并添加此行

    @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
    

    或者转到 .angular-cli.json 并修改 styles

    "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
    ]
    
  • 6

    您正在使用angular cli进行构建,因此您需要通过更新angularcli-build.js中的 vendorNpmFiles 来将引导程序复制到供应商目录

    bootstrap/**/*.*
    

    现在您需要更新index.html的链接以从供应商中选择css

    < link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css">
    
  • 0

    如果在webpack转换后使用angular-cli,请添加

    "../node_modules/bootstrap/dist/css/bootstrap.css"
    

    angular-cli.json 中的 styles 数组:

    "styles": [
      "styles.css",
      "../node_modules/bootstrap/dist/css/bootstrap.css"
    ],
    

    如果您还使用bootstrap javascript,请将这些文件添加到 scripts 数组中 .

相关问题