2. 程式人生 > >react link引入外部css樣式的坑

react link引入外部css樣式的坑

阿新 • • 發佈：2018-11-13

剛開始的程式碼是這樣的，使用react router4.x寫的demo路由跳轉後，頁面的沒有渲染，是因為沒有引入外部css檔案（或者說引入外部檔案路徑錯誤）

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <title>React App</title>
    
    <link rel="stylesheet" href="./css/bootstrap.css">
 

  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

 將上面程式碼（紅色部分）的點去掉就可以了，如下所示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <title>React App</title>
    
    <link rel="stylesheet" href="/css/bootstrap.css">
 

  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

 

相關推薦

react link引入外部css樣式的坑

剛開始的程式碼是這樣的，使用react router4.x寫的demo路由跳轉後，頁面的沒有渲染，是因為沒有引入外部css檔案（或者說引入外部檔案路徑錯誤）   <!DOCTYPE html> <html lang="en"> <head>

久未更 ~ 五之 —— 引入外部CSS樣式表 小節

col div ... fun class utf-8 css樣式 splay date > > > > > 久未更 系列一：在html中引入外部css樣式表 1 //引入外部css樣式表 2 //<lilnk&

在 .vue檔案的樣式檔案中如何引入外部的樣式檔案 （.css .less）

一般情況下vue開發的時候都是一個元件一個元件進行開發，每個元件都有自己的樣式檔案， 基本結構如下所示： <template>        <div class="test">        測試一下，哈哈        </div&

Vue style裏面使用@import引入外部css, 作用域是全局的解決方案

外部 href src mozilla exp 前端性能 資源 sta 樣式表 問題描述 使用@import引入外部css，作用域卻是全局的 &lt;template&gt; &lt;/template&gt; &lt;scrip

微信使用元件時不能引入外部圖示樣式問題

我在元件中使用了外部引入的字型圖示樣式，發現不能使用 可能生成外部字型圖示的wxss樣式不滿足這幾個條件 解決方法: 在app.js中引入了這個外部字型圖示樣式檔案 然後設定了元

React 專案中使用CSS樣式 以及 React.Fragment

jsx 中給元素CSS樣式。 首先，介紹一種優先順序最高的行內樣式。如下。 <button style={{background: 'red',color: 'white'}} onClick={this.handleBtnClick}>add</button>

JSP頁面引入外部CSS檔案，重新整理後不起作用如何解決

一般CSS程式碼可以寫在專門的CSS檔案中，然後某個頁面需要時直接呼叫CSS檔案即可。但發現將CSS檔案引入後仍然不起作用。重新整理後無效果。其實只要在<link>標籤裡新增一個charset="utf-8"就可以了。就像下面這樣：<link rel="st

html引入外部css的用法

/ 代表根目錄，慎用 ../ 代表上一級目錄 ../../ 代表上兩級目錄 /.. 代表下級目錄 /../.. 代表下兩級目錄標準寫法： 同級 直接引用檔名 <link rel="stylesheet" type="text/css" href="theme0.css"

android studio程式設計時引入外部字型樣式

將AS切換到project形式下進入到main目錄，右鍵新建資料夾assets，再右鍵新建fonts資料夾，把準備好的.ttf檔案放在該資料夾下。 在程式碼中新增如下程式碼即可： edittext.setTypeface(Typeface.createFro

如何連線外部CSS樣式

  連線外部CSS樣式     外部CSS樣式是一個獨立的CSS檔案，當在網頁中直接建立外部CSS樣式時，該樣式自動應用到網頁中；當在建立空白網頁時，通常可以附加已經存在的外部樣式表。如果CSS樣式檔案已經存在，製作網頁時可以通過【CSS樣式】面板中的【附加樣式表】按鈕來連

HTML引入CSS樣式三種方法及優先級 CSS樣式的寫法

分開 通過 str 相同 gif 標記 sof 偽類 cnblogs HTML引入CSS樣式三種方法及優先級： 方法 css的樣式引用由3種方式。分別為行內樣式、內部樣式（嵌入式）和外部樣式； 行內樣式： 在對象的標記內使用對象的s

兄弟連學Python----css樣式的三種引入方式

blue ref font 行內樣式 創建 方法 -s 嵌入 shee <!DOCTYPE html> <html> <head> <meta charset=‘utf-8‘ />

css樣式引入

har html標簽 str port color 標簽 表之間 引入 -s 1. css樣式引入HTML方法：四種方式 樣式優先級：行內樣式>內嵌式（內部樣式）>外部樣式（鏈接式+導入式）(後兩者是就近原則) 行內樣式：在標簽中標記sty

CSS引入外部字體

css font如何引入外部字體呢？1.獲取相關文件通常我們在網站下載到的字體包都是以TTF結尾的文件，但是我們前端開發時通常需要四種文件。字體後綴和瀏覽器有關，如下所示 .TTF或.OTF，適用於Firefox 3.5、Safari、Opera .EOT，適用於Internet Explorer 4.0

Java學習總結（二十四）——前端：CSS樣式設計（CSS引入，選擇器，盒子模型，浮動元素）

引入 itl AI dropdown 正常的 type ID 總結 網頁 一．CSS引入方式1.CSS簡介：（1）CSS(Cascading style Sheets):層疊樣式表。用來給html網頁設置樣式;（2）當多個選擇器對同一個元素進行樣式設計時，則該元素的樣式為多

熟悉react native的css樣式

字體 reac justify fault efault 編譯 顏色 resize order 為react-native組件創建樣式屬性有兩種方法 第一種是在組件的style屬性中直接插入一個包含樣式屬性的js對象： export default class App e

06 React快速入門（六）——使用css樣式

      在react中元件使用樣式主要有兩種方式：內聯式和外聯式。下面分別介紹兩種方式：       一、內聯式       使用內聯樣式，和html中差不多，不多在此處需要注意的是，通過sty

CSS的引入方式和樣式

CSS的引入方式和樣式 一.樣式 　　行內樣式　　內接樣式　　外接樣式(1.連結式　　2.匯入式) <!--行內樣式--> <div> <p style="color: green">我是一個段落</p> </di

React組件CSS樣式

tab dex err 打開 () class www css 技術 第一種、外部引入。 　　　　首先，尋找CDN：https://www.bootcdn.cn/ 　　　　然後找到你想要的CDN 如bootstrap等等，點擊復制標簽。 然後打開自己項目目錄的public

React元件CSS樣式

第一種、外部引入。 　　　　首先，尋找CDN：https://www.bootcdn.cn/ 　　　　然後找到你想要的CDN 如bootstrap等等，點選複製標籤。 然後開啟自己專案目錄的public-index.html檔案。   把剛才的CDN複製進去就OK了，然後就可以在標