How to handle css styling in source folder not affecting the html page in public folder in React projects

Question

Firstly, I initialize a template React App using npx create-react-app my-app

Then, I modify the project, and here is my project directory which my-app is the root:

my-app
- node_modules
- public
  - index.html
  - manifest.json
  - robots.txt
- src
  - components
    - Main.js
    - Navbar.js
  - fonts
  - images
  - App.js
  - index.js
  - style.css
- package-lock.json
- package.json

In HTML I attach a stylesheet reference but it didn't work, how to handle this?. Notice that I am not trying to attach or import a stylesheet in Javascript (JSX) file but rather import CSS styling to an HTML file but it seems the react app doesn't allow index.html to import the styling from another folder.

Toggle · Answer

Urls in index.html aren't processed by webpack in the same way as the imports in a JS file. If you want to add a reference to a plain, unprocessed asset, you could place it in the public folder and use %PUBLIC_URL% like so:

The relevant section of the create-react-app docs is "adding assets outside of the module system": https://create-react-app.dev/docs/using-the-public-folder/#adding-assets-outside-of-the-module-system

How to handle css styling in source folder not affecting the html page in public folder in React projects

1 Answers