How to reference a CDN from my APP.css file

0
votes

I am trying to get some style from a site for my very simple navbar react page I am still very new to react so I am unsure as to where to import the CDN style page link Currently , I have an index.js page which references my App.js page and my App.js page which references my App.css page

The CDN i am trying to reference is a basic bootstrap CDN https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css

And here is my App.js code

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;
1
javascriptcssreactjscdn
Put it in your index.html, that's where you reference 3rd party scripts/CSS/etc.. Just use a <link/> – Jayce444
There is no index.html just index.js – DevOps_N_Training
An index.html is always generated, can't have a website with it. So however it is, you need to add it to that – Jayce444

1 Answers

0
votes

You can add External CSS library in index.html page inside public directory.

public/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>