Angular+TypeScript项目添加Bootstrap失败，求助解决BrowserslistError

It looks like the issue stems from using an unstable pre-release version of Bootstrap (bootstrap@next) alongside an older Angular CLI setup. The error occurs because the Bootstrap version you installed uses a browserslist configuration that your project's postcss-loader doesn't recognize. Here are a few straightforward fixes to resolve this:

1. Switch to a Stable Bootstrap Version (Recommended for Beginners) #

The @next tag points to pre-release versions of Bootstrap, which can have compatibility issues with older tooling. Instead, install the latest stable version of Bootstrap that works well with Angular 4:

npm uninstall bootstrap --save
npm install bootstrap@4.0.0 --save

Your existing angular-cli.json styles and scripts configuration is already correct for this stable version, so no further tweaks are needed there.

2. Update Your Project's Browserslist Configuration #

If you want to keep the Bootstrap version you installed, you can explicitly define valid browser targets to avoid the "Unknown browser major" error.

• Create a .browserslistrc file in your project root with these contents:

last 2 versions
> 1%
IE 11

Or add this section directly to your package.json:

"browserslist": [
  "last 2 versions",
  "> 1%",
  "IE 11"
]

This tells postcss-loader which browsers to support, resolving the unrecognized browser entry from Bootstrap's config.

3. Update PostCSS-Related Dependencies #

If the above fixes don't work, try updating the postcss-loader and browserslist packages to versions that support the syntax used by your Bootstrap version:

npm install postcss-loader@latest browserslist@latest --save-dev

After making any of these changes, restart your Angular development server—configuration changes often require a fresh start to take effect.

内容的提问来源于stack exchange，提问作者Wai Yan Hein