如何在index.html reactjs应用程序中导入bootstrap和fontasome
[英]How to import bootstrap and fontasome in index.html reactjs app
问题描述
Install bootstrap using this command (npm install bootstrap@4.0.0-alpha.6) and my index.html file is: 
使用此命令安装引导程序（npm install bootstrap@4.0.0-alpha.6），我的index.html文件为：
According issue I can add the css from other front framework ( https://maxcdn.bootstrapcdn.com/ ), and make it work. 根据问题，我可以从其他前端框架（ https://maxcdn.bootstrapcdn.com/ ）添加css，并使它工作。 I d ID
<!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 个解决方案
解决方案1
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'; 使用npm安装bootstrap之后，在您的react应用中，转到index.js文件并添加import'bootstrap / dist / css / bootstrap.css';
For font awesome please refer How to include a Font Awesome icon in React's render() . 对于真棒字体，请参阅如何在React的render（）中包括真棒字体图标 。 Someone has posted in stackoverflow. 有人发布了stackoverflow。
解决方案2
0 2018-05-23 18:18:06
If you installed Bootstrap using npm install : 如果您使用npm install安装了Bootstrap：
Remove <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" /> from your index.html file. 从index.html文件中删除<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" /> 。
Then, import the Bootstrap CSS file from node_modules into the root index.js file of your React app: 然后，将Bootstrap CSS文件从node_modules导入到React应用程序的根index.js文件中：
import 'node_modules/bootstrap/dist/css/bootstrap.min.css';
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.