时间戳

首页 > 解决方案 > 如何从我的 APP.css 文件中引用 CDN

javascript - 如何从我的 APP.css 文件中引用 CDN

问题描述

我正在尝试从一个站点为我的非常简单的导航栏反应页面获取一些样式我仍然很陌生，所以我不确定在哪里导入 CDN 样式页面链接目前，我有一个 index.js 页面，它引用了我的App.js 页面和引用我的 App.css 页面的 App.js 页面

我试图引用的 CDN 是一个基本的引导 CDN https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css

这是我的 App.js 代码

import React from 'react';
import './App.css';

function App() {
  return (
    <nav className="navbar navbar-default">
    <div className="container-fluid">
        <div className="navbar-header">
            <a className="navbar-brand" href="#">Some Navbar</a>
        </div>
        <ul className="nav navbar-nav">
            <li className="active"><a href="#">Home</a></li>
            <li><a href="#">Page 1</a></li>
            <li><a href="#">Page 2</a></li>
            <li><a href="#">Page 3</a></li>
        </ul>
    </div>
</nav>
  );
}

export default App;

标签： javascriptcssreactjscdn

解决方案

您可以在公共目录内的 index.html 页面中添加外部 CSS 库。

公共/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link href=" https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
  
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  
  <title>React App</title>
</head>

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

</html>

推荐阅读