CODEWITHSUNDEEP
javascripthtmlcssreactjs
sempraEdic
sempraEdic

Reputation: 137

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

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:

In HTML <head> I attach a stylesheet reference <link rel="stylesheet" href="../src/style.css"> 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.

Upvotes: 0

Views: 38

Answers (1)

Evan Summers
Evan Summers

Reputation: 1212

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:

<link rel="stylesheet" href="%PUBLIC_URL%/style.css">

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

Upvotes: 1

Related Questions