How to import bootstrap and fontasome in index.html reactjs app
Question
Install bootstrap using this command (npm install bootstrap@4.0.0-alpha.6) and my index.html file is:
According issue I can add the css from other front framework ( https://maxcdn.bootstrapcdn.com/ ), and make it work. I d
<!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"> <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" /> <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 (eg 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>
2 answers
solution1
1 2018-05-23 06:49:32
After installing bootstrap using npm, in your react app, go to index.js file and add import 'bootstrap/dist/css/bootstrap.css';
For font awesome please refer How to include a Font Awesome icon in React's render() . Someone has posted in stackoverflow.
solution2
0 2018-05-23 18:18:06
If you installed Bootstrap using npm install :
Remove <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" /> from your index.html file.
Then, import the Bootstrap CSS file from node_modules into the root index.js file of your React app:
import 'node_modules/bootstrap/dist/css/bootstrap.min.css';
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.