angular - Bootstrap 4 不适用于 Angular 2 应用程序

Question

我刚刚在 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"

但我收到以下错误:

ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/bootstrap/dist/css/bootstrap.css Module build failed: BrowserslistError: Unknown browser major at error (D:\Users\Andrew\Documents\code\JobSolution\node_modules\browserslist\index.js:37:11) at Function.browserslist.checkName (D:\Users\Andrew\Documents\code\JobSolution\node_modules\browserslist\index.js:320:18) at Function.select (D:\Users\Andrew\Documents\code\JobSolution\node_modules\browserslist\index.js:438:37) at D:\Users\Andrew\Documents\code\JobSolution\node_modules\browserslist\index.js:207:41 at Array.forEach () at browserslist (D:\Users\Andrew\Documents\code\JobSolution\node_modules\browserslist\index.js:196:13) at Browsers.parse (D:\Users\Andrew\Documents\code\JobSolution\node_modules\autoprefixer\lib\browsers.js:44:14) at new Browsers (D:\Users\Andrew\Documents\code\JobSolution\node_modules\autoprefixer\lib\browsers.js:39:28) at loadPrefixes (D:\Users\Andrew\Documents\code\JobSolution\node_modules\autoprefixer\lib\autoprefixer.js:56:18) at plugin (D:\Users\Andrew\Documents\code\JobSolution\node_modules\autoprefixer\lib\autoprefixer.js:62:18) at LazyResult.run (D:\Users\Andrew\Documents\code\JobSolution\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:270:20) at LazyResult.asyncTick (D:\Users\Andrew\Documents\code\JobSolution\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:185:32) at LazyResult.asyncTick (D:\Users\Andrew\Documents\code\JobSolution\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:197:22) at LazyResult.asyncTick (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) at new Promise () @ ./node_modules/bootstrap/dist/css/bootstrap.css 4:14-127 @ multi ./src/styles.css ./node_modules/bootstrap/dist/css/bootstrap.css

webpack: Failed to compile.

当然我不知道这是什么意思。有什么想法吗？

Answer 1

那是您正在学习的旧教程。使用此命令安装 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"
  ],

编辑:

用于 Bootstrap 4 的 Internet Explorer:

支持 Internet Explorer 10+； IE9及以下不是。请注意，IE10 不完全支持某些 CSS3 属性和 HTML5 元素，或者需要前缀属性才能实现全部功能。访问 Can I use... 以了解有关浏览器支持 CSS3 和 HTML5 功能的详细信息。

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