Angular 5中无法引入Bootstrap的问题求助

Hey there, let's get your Bootstrap styles up and running in your Angular 5 app! I've run into this exact issue a few times, so let's walk through the fixes step by step.

First, Fix the Path in .angular-cli.json #

The most likely culprit here is the path you're using for Bootstrap's CSS. Since .angular-cli.json lives in your project root (same level as the node_modules folder), you don't need the ../ prefix—those dots tell the system to look one directory up, which is why the styles aren't being found.

Update your styles array to this (and you only need one Bootstrap CSS file—stick with the minified version for better performance):

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

Don't Forget to Restart the Dev Server! #

Angular CLI caches configuration changes, so after editing .angular-cli.json, you need to stop your current ng serve process and restart it. This ensures the new style paths are picked up properly.

Verify the Installation #

Double-check that Bootstrap actually installed correctly:

• Navigate to your project's node_modules/bootstrap/dist/css folder
• Make sure bootstrap.min.css exists there. If it's missing, run npm install --save bootstrap again to reinstall the package.

Alternative: Import Bootstrap Directly in styles.css #

If the above steps don't work, you can try importing Bootstrap directly into your global styles.css file instead:

@import '~bootstrap/dist/css/bootstrap.min.css';

The ~ tells Angular CLI to look in the node_modules folder for the file automatically.

Test It Out #

Once you've made these changes and restarted the server, add a Bootstrap-styled element to your template (like <button class="btn btn-primary">Test Button</button>) and check if it renders with Bootstrap's styling. You can also inspect the styles.bundle.js file in your browser's dev tools—search for "bootstrap" to confirm the styles are included.

If you're still stuck, try deleting your node_modules folder and package-lock.json file, then run npm install from scratch to ensure all dependencies are properly installed.

内容的提问来源于stack exchange，提问作者Ankit Kathait