如何在package.json中正确配置Bootstrap 3的安装依赖？

Hey there! Let me clear up the confusion around setting up Bootstrap 3 in your package.json and getting it working smoothly.

First: The Correct Dependency Syntax #

Your first attempt "bootstrap": "3.3.7" is actually the right way to go—let me explain why both your tries had mixed results:

• "bootstrap": "3.3.7": This is valid! It tells npm to install exactly version 3.3.7 of Bootstrap. If this didn't work for you, it's likely because you forgot to run npm install after editing package.json, or there was a cache issue.
• "bootstrap@3": "3.3.7": This is invalid—the @3 syntax is only used in the terminal when running install commands (like npm install bootstrap@3), not in the package.json itself. The key in the dependencies object should always be the exact package name (bootstrap), with the version as the value.

Quickest Way to Set It Up #

You don't even need to manually edit package.json if you run the right install command:

npm install bootstrap@3.3.7 --save

The --save flag (which is default in newer npm versions) will automatically add the correct "bootstrap": "3.3.7" line to your dependencies section.

Using Bootstrap 3 in create-react-app #

Once the dependency is installed, you need to import Bootstrap's CSS into your app to use its styles. In your src/index.js file, add this line at the top:

import 'bootstrap/dist/css/bootstrap.css';

That's it! Bootstrap's styles will now be applied globally to your React app.

Troubleshooting If It Still Isn't Working #

• Run npm cache clean --force to clear any cached packages, then re-run npm install
• Double-check that your package.json has "bootstrap": "3.3.7" inside the dependencies object (not devDependencies, unless you only need it for development)
• Verify that you're importing the CSS file correctly in your React entry point

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