如何在ReactJS应用的index.html中引入Bootstrap与FontAwesome

你已经通过npm install bootstrap@4.0.0-alpha.6完成了Bootstrap的本地安装，接下来可以通过两种方式引入它的CSS文件，让框架样式正常生效：

方式一：使用本地安装的Bootstrap资源 #

你当前的index.html里已经配置了本地引入代码，只要确认node_modules/bootstrap/dist/css/bootstrap.min.css这个路径和你的项目文件结构匹配，就能正常加载样式：

<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />

方式二：使用CDN链接快速引入 #

如果本地依赖加载出现问题，或者想快速验证效果，也可以替换成对应版本的CDN链接（也就是你提到的maxcdn源），替换后的代码如下：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

修改后的完整index.html示例 #

<!doctype html>
<html lang="en">
<head>
    <!-- The first thing in any HTML file should be the charset -->
    <meta charset="utf-8">
    <!-- Make the page mobile compatible -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Allow installing the app to the homescreen -->
    <link rel="manifest" href="manifest.json">
    <!-- 可根据需求选择本地引入或CDN引入 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <meta name="mobile-web-app-capable" content="yes">
    <title>Super Tax</title>
    <script type="text/javascript">
        (function(e,t){var n=e.amplitude||{_q:[],_iq:{}};var r=t.createElement("script") ;r.type="text/javascript";r.async=true ;r.src="https://cdn.amplitude.com/libs/amplitude-4.0.0-min.gz.js" ;r.onload=function(){if(e.amplitude.runQueuedFunctions){ e.amplitude.runQueuedFunctions()}else{ console.log("[Amplitude] Error: could not load SDK")}} ;var i=t.getElementsByTagName("script")[0];i.parentNode.insertBefore(r,i) ;function s(e,t){e.prototype[t]=function(){ this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));return this}} var o=function(){this._q=[];return this} ;var a=["add","append","clearAll","prepend","set","setOnce","unset"] ;for(var u=0;u<a.length;u++){s(o,a[u])}n.Identify=o;var c=function(){this._q=[] ;return this} ;var l=["setProductId","setQuantity","setPrice","setRevenueType","setEventProperties"] ;for(var p=0;p<l.length;p++){s(c,l[p])}n.Revenue=c ;var d=["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","setGlobalUserProperties","identify","clearUserProperties","setGroup","logRevenueV2","regenerateDeviceId","logEventWithTimestamp","logEventWithGroups","setSessionId"] ;function v(e){function t(t){e[t]=function(){ e._q.push([t].concat(Array.prototype.slice.call(arguments,0)))}} for(var n=0;n<d.length;n++){t(d[n])}}v(n);n.getInstance=function(e){ e=(!e||e.length===0?"$default_instance":e).toLowerCase() ;if(!n._iq.hasOwnProperty(e)){n._iq[e]={_q:[]};v(n._iq[e])}return n._iq[e]} ;e.amplitude=n})(window,document); amplitude.getInstance().init("AMPLITUDE_KEY");
    </script>
</head>
<body>
    <!-- Display a message if JS has been disabled on the browser. -->
    <noscript>If you're seeing this message, that means <strong>JavaScript has been disabled on your browser</strong>, please <strong>enable JS</strong> to make this app work.</noscript>
    <!-- The app hooks into this div -->
    <div id="app"></div>
    <div id="message-container" style="display: none;" class="st-alert"></div>
    <div id="connection-status" style="display: none;">
        <div>
            <span class="fa fa-circle margin-right-16" style="color: red;"></span>
            <span>You are offline</span>
        </div>
    </div>
    <div id="progress-bar-container">
        <div id="progress-bar"></div>
    </div>
    <!-- A lot of magic happens in this file. HtmlWebpackPlugin automatically includes all assets (e.g. bundle.js, main.css) with the correct HTML tags, which is why they are missing in this HTML file. Don't add any assets here! (Check out webpackconfig.js if you want to know more) -->
</body>
</html>

小提示：如果选择本地引入，要确认你的项目构建工具（比如Webpack）能正确解析node_modules路径的资源；如果路径不匹配，需要调整为相对HTML文件的正确路径。

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