无法使用bootstrap

时间:2018-01-22 23:45:07

标签: angular twitter-bootstrap

在包含引导程序时编译我的Angular应用程序时遇到问题。我是Angular的新手,但之前我曾经使用过这个,我认为以下是我必须做的所有事情,但是我无法让它工作。

我使用以下命令通过Powershell从CLI安装了引导程序:

npm install bootstrap --save

我似乎已经在我的node_modules文件夹中看到了它。

我在.angular-cli.json的[样式]部分中包含了Boostrap样式行

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

但是当我尝试使用ng serve启动我的角度应用时,我收到以下错误:

PS C:\ angular \ apps \ MyApp \ MyApp.webapp>服务 ** NG Live Development Server正在侦听localhost:4200,在http://localhost:4200/上打开浏览器** 日期:2018-01-22T22:55:02.306Z 哈希:55d32425f16b07bf6645 时间:46713毫秒 chunk {inline} inline.bundle.js,inline.bundle.js.map(inline)5.83 kB [entry] [rendered] chunk {main} main.bundle.js,main.bundle.js.map(main)8.64 kB {vendor} [initial] [rendered] chunk {polyfills} polyfills.bundle.js,polyfills.bundle.js.map(polyfills)218 kB {inline} [initial] [rendered] chunk {styles} styles.bundle.js,styles.bundle.js.map(styles)14.7 kB {inline} [initial] [rendered] chunk {vendor} vendor.bundle.js,vendor.bundle.js.map(vendor)2.3 MB [initial] [rendered]

./node_modules/css-loader中的错误?     { “sourceMap”:假的, “importLoaders”:1}!./ node_modules / postcss装载机     ?{ “标识”: “postcss”} ./ node_modules /引导/距离/ CSS / bootstrap.min.css!     模块构建失败:BrowserslistError:未知的浏览器查询>= 1%     有误     (C:\角\应用\ MyApp的\ MyApp.webapp \ node_modules \ browserslist \     index.js:37:11)     在C:\ angular \ apps \ MyApp \ MyApp.webapp \ node_modules \ browserslist \     index.js:222:9在Array.forEach(native)     在browserslist中     (C:\角\应用\ MyApp的\ MyApp.webapp \ node_modules \ browserslist \     index.js:196:13)     在Browsers.parse     (C:\角\应用\ MyApp的\ MyApp.webapp \ node_modules \ autoprefixer \ lib中\     browsers.js:44:14)在新浏览器上     (C:\角\应用\ MyApp的\ MyApp.webapp \ node_modules \ autoprefixer \ lib中\     browsers.js:39:28)     在loadPrefixes     (C:\角\应用\ MyApp的\ MyApp.webapp \ node_modules \ autoprefixer \ lib中\     autoprefixer.js:56:18)插件
    (C:\角\应用\ MyApp的\ MyApp.webapp \ node_modules \ autoprefixer \ lib中\     autoprefixer.js:62:18)在LazyResult.run
    (C:\角\应用\ MyApp的\ MyApp.webapp \ node_modules \ postcss \ lib中\     懒惰result.js:274:20)     在LazyResult.asyncTick
    (C:\角\应用\ MyApp的\ MyApp.webapp \ node_modules \ postcss \ lib中\     懒惰result.js:189:32)     在LazyResult.asyncTick     (C:\角\应用\ MyApp的\ MyApp.webapp \ node_modules \ postcss \ lib中\     懒惰result.js:201:22)     在processing.Promise.then._this2.processed
    (C:\角\应用\ MyApp的\ MyApp.webapp \ node_modules \ postcss \ lib中\     懒惰result.js:228:20)     在LazyResult.async     (C:\角\应用\ MyApp的\ MyApp.webapp \ node_modules \ postcss \ lib中\     懒惰result.js:225:27)     在LazyResult.then     (C:\角\应用\ MyApp的\ MyApp.webapp \ node_modules \ postcss \ lib中\     懒惰result.js:131:21)     在C:\ angular \ apps \ MyApp \ MyApp.webapp \ node_modules \ postcss-loader \     index.js:129:55     @ ./node_modules/bootstrap/dist/css/bootstrap.min.css 4:14-127     @ multi ./node_modules/bootstrap/dist/css/bootstrap.min.css ./src/styles.css

webpack:无法编译。

当我从[样式]部分删除了增强线时,错误消失。

知道造成这种情况的原因是什么?

由于

3 个答案:

答案 0 :(得分:1)

上述方法对我不起作用。当我尝试构建项目时,找不到包引用,并显示以下错误消息。

enter image description here


我使用的是“ node_modules / bootstrap / dist / css / bootstrap.min.css”,而不是使用“ ../ node_modules / bootstrap / dist / css / bootstrap.min.css ”在 angular.json 中的包参考中。

答案 1 :(得分:0)

当我关注我正在关注的教程中的笔记时,我写下了安装bootstrap 3.x的说明,我必须使用以下命令行:

npm install bootstrap --save

并安装bootstrap 4.x,我必须使用以下命令

npm install bootstrap@next --save

但当我为package.json打开bootstrap时,我注意到它引用了4.0。

要解决我的问题,我转到我的node_modules文件夹并卸载了当前版本的boostrap

npm uninstall bootstrap --save

并重新安装4.0之前的最高版本,即

npm install bootstrap@3.3.7 --save

这解决了我的问题,我的应用程序现在按预期运行ng server时,我的原始帖子中提到的引导样式行包含在[style]问题中。

希望这有助于其他人。

答案 2 :(得分:0)

版本: Angular 6

cli:6.2.3(ng --version)

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