ReactJS项目中如何导入自定义Bootstrap相关脚本？

Hey there! Let's get your custom Bootstrap-related CSS and JS files properly set up in your React app. Your current HTML approach has a couple of issues (those assets are commented out, and you're using <script> tags for CSS, which isn't right), so let's walk through the right methods step by step.

Method 1: Global Import via public/index.html (Recommended for Global Assets) #

This is the best approach if you want these styles and scripts to apply across your entire React app. React uses the public/index.html file as the base template for your app, so adding your assets here will load them globally.

Replace your current HTML with this corrected structure:

<html>
  <head>
    <!-- Import your custom CSS first -->
    <link rel="stylesheet" href="https://www.s81c.com/common/v18/css/www.css">
  </head>
  <body>
    <!-- Your React app root div will be injected here automatically -->
    <div id="root"></div>

    <!-- Import JS files at the end of the body to avoid rendering issues -->
    <script src="https://www.s81c.com/common/stats/ida_stats.js"></script>
    <script src="https://www.s81c.com/common/v18/js/www.js"></script>
  </body>
</html>

• Key fixes:
  • Used <link> instead of <script> for CSS (that's the correct tag for stylesheets)
  • Removed the comment // from the asset URLs so the browser can load them
  • Placed JS files at the end of the <body> to ensure the DOM is ready before scripts run

Method 2: Import CSS Directly in React Components (For Component-Specific Styles) #

If you only need the custom CSS in specific components (like App.js), you can import it directly—note this only works for local CSS files, not external CDN URLs.

First, download the www.css file to your project (e.g., place it in src/styles/), then import it in App.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import './styles/www.css'; // Import your local custom CSS

class App extends Component {
  render() {
    return (
      <div className="App">
        {/* Your component content */}
      </div>
    );
  }
}

export default App;

For external JS files (like the stats and www.js from your URL), stick to Method 1—React doesn't support importing external CDN JS files directly via import statements.

Important Notes #

• Never use <script> tags for CSS: Stylesheets require the <link> tag with rel="stylesheet" to load correctly.
• Load order matters: Always load CSS before JS to prevent unstyled content from flashing on the page.
• Check asset URLs: Make sure the URLs for your CSS/JS are correct and accessible (remove any accidental comment characters like //).

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