首页 文章

Bootstrap 4无法使用Angular 2应用程序

提问于
浏览 次
3

我刚在VS Code中创建了一个新的Angular应用程序 . 我根据这些指示添加了Bootstrap 4：

https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/

并更改了“样式”和“脚本”以添加这些行（jquery和popper行在其他一些方向上找到，我得到相同的错误，有或没有）：

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

    "../node_modules/jquery/dist/jquery.slim.js",
    "../node_modules/popper.js/dist/umd/popper.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"

但我收到以下错误：

错误在./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false} ！./ node_modules / bootstrap / dist / css / bootstrap.css模块构建失败：BrowserslistError：出现错误的未知浏览器专业（D：\ Users \ Andrew \ Documents \ code \ JobSolution \ node_modules \ browserslist \ index.js：37：11 ）在Function.select的Function.browserslist.checkName（D：\ Users \ Andrew \ Documents \ code \ JobSolution \ node_modules \ browserslist \ index.js：320：18）中（D：\ Users \ Andrew \ Documents \ code \ JobSolution） \ node_modules \ browserslist \ index.js：438：37）位于D = \ Users \ Andrew \ Documents \ code \ JobSolution \ node_modules \ browserslist \ index.js：207：41，位于browserslist上的Array.forEach（）（D：\用户\ Andrew \ Documents \ code \ JobSolution \ node_modules \ browserslist \ index.js：196：13）在Browsers.parse（D：\ Users \ Andrew \ Documents \ code \ JobSolution \ node_modules \ autoprefixer \ lib \ browsers.js： 44:14）在新浏览器（D：\ Users \ Andrew \ Documents \ code \ JobSolution \ node_modules \ autoprefixer \ lib \ browsers） .js：39：28）在插件（D：\ Users \ Andrew \ Documents \ code）的loadPrefixes（D：\ Users \ Andrew \ Documents \ code \ JobSolution \ node_modules \ autoprefixer \ lib \ autoprefixer.js：56：18） \ JobSolution \ node_modules \ autoprefixer \ lib \ autoprefixer.js：62：18）在LazyResult.run（D：\ Users \ Andrew \ Documents \ code \ JobSolution \ node_modules \ postcss-loader \ node_modules \ postcss \ lib \ lazy-result） .js：270：20）在LazyResult的LazyResult.asyncTick（D：\ Users \ Andrew \ Documents \ code \ JobSolution \ node_modules \ postcss-loader \ node_modules \ postcss \ lib \ lazy-result.js：185：32） . LazyResult.asyncTick上的asyncTick（D：\ Users \ Andrew \ Documents \ code \ JobSolution \ node_modules \ postcss-loader \ node_modules \ postcss \ lib \ lazy-result.js：197：22）（D：\ Users \ Andrew \ Documents \ code \ JobSolution \ node_modules \ postcss-loader \ node_modules \ postcss \ lib \ lazy-result.js：197：22）at processing.Promise.then._this2.processed（D：\ Users \ Andrew \ Documents \ code \ JobSolution \ node_modules \ postcss-loader \ node_modules \ postcss \ lib \ lazy-result.js：224：20）在新的Promise（）@ ./node_modules/ bootstrap / dist / css / bootstrap.css 4：14-127 @ multi ./src/styles.css ./node_modules/bootstrap/dist/css/bootstrap.css webpack：编译失败 .

当然我不知道这意味着什么 . 有任何想法吗？

angular twitter-bootstrap bootstrap-4

2 回答

  • 3

    这是你正在关注的旧教程 . 使用此命令安装Bootstrap 4：

    npm install bootstrap@4.0.0-beta.2 popper.js jquery --save

    在angular-cli.json中添加以下行：

    "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/popper.js/dist/popper.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

    EDIT:

    Internet Explorer For Bootstrap 4:

    支持Internet Explorer 10; IE9和下来不是 . 请注意，IE10中不完全支持某些CSS3属性和HTML5元素，或者需要前缀属性才能获得完整功能 . 访问我可以使用...了解有关CSS3和HTML5功能的浏览器支持的详细信息 .

    如果您需要IE8-9支持，请使用Bootstrap 3.它是我们代码中最稳定的版本，我们的团队仍然支持关键错误修正和文档更改 . 但是，不会添加任何新功能 .

    回复于
  • 0

    我用这个命令来安装bootstrap版本和jquery，它对我有用 . 希望它也适合你 .

    “npm install bootstrap@4.0.0-beta.2 popper.js jquery --save”

    回复于

相关问题