如何在index.html reactjs應用程序中導入bootstrap和fontasome

Question

使用此命令安裝引導程序（npm install bootstrap@4.0.0-alpha.6），我的index.html文件為：

根據問題，我可以從其他前端框架（ https://maxcdn.bootstrapcdn.com/ ）添加css，並使它工作。 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>

Answer 1

使用npm安裝bootstrap之后，在您的react應用中，轉到index.js文件並添加import'bootstrap / dist / css / bootstrap.css';

對於真棒字體，請參閱如何在React的render（）中包括真棒字體圖標。 有人發布了stackoverflow。

Answer 2

如果您使用npm install安裝了Bootstrap：

從index.html文件中刪除<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" /> 。

然后，將Bootstrap CSS文件從node_modules導入到React應用程序的根index.js文件中：

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

如何在index.html reactjs應用程序中導入bootstrap和fontasome

問題描述

2 個解決方案

解決方案1
1 2018-05-23 06:49:32

解決方案2
0 2018-05-23 18:18:06

如何在index.html reactjs應用程序中導入bootstrap和fontasome

問題描述

2 個解決方案

解決方案1 1 2018-05-23 06:49:32

解決方案2 0 2018-05-23 18:18:06

解決方案1
1 2018-05-23 06:49:32

解決方案2
0 2018-05-23 18:18:06