I have deployed an app to Netlify but the css isn't loading how I expected it to. Is there something you need to do to link it differently or have I just missed something? Some of the css is working fine but not all of it. Thanks,

Here is the link to my Netlify site. https://jade-sunshine-f54ff9.netlify.app/

Here is the link to the GitHub repo which has screenshots of how it looks when run locally https://github.com/owka54/PERN-TwitterClone

App.jsx

import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import React, { useState, useEffect } from 'react';
import axios from 'axios';

import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom'
import Login from './components/login'
import Root from './components/root';
import NewPost from './components/newPost';
import MyPosts from './components/myPosts';
import Register from './components/register';
import UserPosts from './components/userPosts';

function App() {

  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const setAuth = (boolean) => {
    setIsAuthenticated(boolean);
  }

  const isAuth = async () => {
    try {
      const response = await axios({
        method: 'GET',
        url: 'https://twitter-clone-25th.onrender.com/user/is-verify',
        headers: {token: localStorage.token}
      });
      console.log(response.data);

      response.data === true ? setIsAuthenticated(true) : setIsAuthenticated(false);
    } catch (err) {
      console.error(err.message);
    }
  }

  const [isAdmin, setIsAdmin] = useState(false);

  const checkAdmin = async (req, res) => {
    const username = localStorage.getItem('username');
    const response = await axios.get(`https://twitter-clone-25th.onrender.com/user/is-admin/${username}`);
    response.data === true ? setIsAdmin(true) : setIsAdmin(false);
  }

  const setAdmin = (boolean) => {
    setIsAdmin(boolean);
  };


  useEffect(() => {
    isAuth();
    checkAdmin();
  }, []);

  return (
    <div className="App">
      <Router>
        <Routes>
          <Route exact path='/' element={<Root isAuthenticated={isAuthenticated} setAuth={setAuth} isAdmin={isAdmin} setAdmin={setAdmin}/> } />
          <Route exact path='login' element={ isAuthenticated === false ? <Login isAuthenticated={isAuthenticated} setAuth={setAuth} /> : <Navigate to='/' />} />
          <Route exact path='register' element={ isAuthenticated === false ? <Register isAuthenticated={isAuthenticated} setAuth={setAuth}/> : <Navigate to='/'/>}/>
          <Route exact path='new-post' element={ isAuthenticated === false ? <Login isAuthenticated={isAuthenticated} setAuth={setAuth}/> : <NewPost isAuthenticated={isAuthenticated}/>} />
          <Route exact path='my-posts' element={ isAuthenticated === true ? <MyPosts isAuthenticated={isAuthenticated} setAuth={setAuth}/> : <Login isAuthenticated={isAuthenticated} setAuth={setAuth}/>}/>
          <Route path=':username' element={ <UserPosts isAuthenticated={isAuthenticated} setAuth={setAuth}/> }/>
        </Routes>
      </Router>
    </div>
  )
}

export default App

`

CodePudding user response：

I had a similar issue before I started using CSS modules, but that's mostly helpful when you're using separate CSS sheets for separate components and it seems you're using just one.

I see you're importing app.css both in index.html and in app.js, maybe that could be causing some conflict.