首页 文章

无法使用bootstrap编译角度应用程序

提问于
浏览 次
0

在包含引导程序时，我在编译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服务** NG Live Development Server正在侦听localhost：4200，在http://localhost:4200/上打开浏览器**日期：2018-01-22T22：55：02.306Z哈希： 55d32425f16b07bf6645时间：46713ms chunk inline.bundle.js，inline.bundle.js.map（inline）5.83 kB [entry] [rendered] chunk main.bundle.js，main.bundle.js.map（ main）8.64 kB [initial] [rendered] chunk polyfills.bundle.js，polyfills.bundle.js.map（polyfills）218 kB [initial] [rendered] chunk 样式 . bundle.js，styles.bundle.js.map（styles）14.7 kB [initial] [rendered] chunk vendor.bundle.js，vendor.bundle.js.map（vendor）2.3 MB [initial] [渲染]

ERROR in ./node_modules/css-loader? {"sourceMap"：false，"importLoaders"：1}！ . / node_modules / postcss-loader？{"ident"："postcss"}！./ node_modules / bootstrap / dist / css / bootstrap.min.css模块构建失败：BrowserslistError：未知浏览器查询 >= 1% 错误（C：\ angular \ apps \ MyApp \ MyApp.webapp \ node_modules \ browserslist \ index.js：37：11）位于C：\ angular \ apps \ MyApp \ MyApp.webapp \ node_modules \ browserslist \ index.js：在Browsers.parse（C：\ angular \ apps \）的browserslist（C：\ angular \ apps \ MyApp \ MyApp.webapp \ node_modules \ browserslist \ index.js：196：13）的Array.forEach（native）的222：9新浏览器中的MyApp \ MyApp.webapp \ node_modules \ autoprefixer \ lib \ browsers.js：44：14）
（C：\ angular \ apps \ MyApp \ MyApp.webapp \ node_modules \ autoprefixer \ lib \ browsers.js:39:28）loadPrefixes（C：\ angular \ apps \ MyApp \ MyApp.webapp \ node_modules \ autoprefixer \ lib \） autoprefixer.js：56：18）插件
LazyResult.run上的（C：\ angular \ apps \ MyApp \ MyApp.webapp \ node_modules \ autoprefixer \ lib \ autoprefixer.js：62：18）
LazyResult.asyncTick上的（C：\ angular \ apps \ MyApp \ MyApp.webapp \ node_modules \ postcss \ lib \ lazy-result.js：274：20）
（C：\ angular \ apps \ MyApp \ MyApp.webapp \ node_modules \ postcss \ lib \ lazy-result.js：189：32）在LazyResult.asyncTick（C：\ angular \ apps \ MyApp \ MyApp.webapp \ node_modules \ postcss \ lib \ lazy-result.js：201：22）在processing.Promise.then._this2.processed
（C：\ angular \ apps \ MyApp \ MyApp.webapp \ node_modules \ postcss \ lib \ lazy-result.js：228：20）在LazyResult.async（C：\ angular \ apps \ MyApp \ MyApp.webapp \ node_modules \ postcss \ lib \ lazy-result.js：225：27）在LazyResult.then（C：\ angular \ apps \ MyApp \ MyApp.webapp \ node_modules \ postcss \ lib \ lazy-result.js：131：21）at 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: Failed to compile.

当我从[样式]部分删除boostrap行时，错误消失 .

知道是什么导致了这个吗？

谢谢

angular twitter-bootstrap

3 回答

  • 1

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

    enter image description here

    而不是在 angular.json 中的包引用中使用“ ../node_modules/bootstrap/dist/css/bootstrap.min.css " I used " node_modules/bootstrap/dist/css/bootstrap.min.css ”并且它有效 .

    回复于
  • 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 与我在[样式]问题中包含的原始帖子中提到的引导样式行 .

    希望这有助于其他人 .

    回复于
  • 0

    版本： Angular 6

    cli: 6.2.3 (ng --version)

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

相关问题