CODEWITHSUNDEEP
htmlcss
Ken-Preston
Ken-Preston

Reputation: 3

CSS file not properly linking to html when in separate folders

I'm having trouble linking the css file to the index.html. If it's in the same folder then it works but if I move the CSS file one folder above, it seems to fail even with ../ notation. Here's a picture of the code with the file directory setup. Seperate Folder

Shouldn't "../src/index.css" step up a folder, then go down src/ to find the file?

Upvotes: 0

Views: 2688

Answers (5)

Steve K
Steve K

Reputation: 9055

It looks like you are using react and create-react-app correct? If you are then you cannot access anything outside of that folder from within it because the react environment is built with the public folder as the only publicly accessible folder.

So this is a good place to put an img folder and things like that. You have 2 choices here. You can either put your global css file in the public folder and link to it from your html file. You can also create a css folder in the public folder to store your css files.

Or most people just import the css files into the components. So for your global css you can just import it in the index.js or app.js files like so:

import './index.css'

But trying to access anything from a file in your public folder to a file outside of the public folder is a no go.

Upvotes: 0

prajna
prajna

Reputation: 29

Are you running the index.html file using static-server? If yes then go to the root directory and run

static-server -i ./public/index.html

-i is for providing the index file manually.

If you run static-server in the public folder it doesn't take the css from the root directory.Keep the href as "../index.css". It works.

Upvotes: 0

JohnP
JohnP

Reputation: 1309

Start your path with the / symbol and you'll be using the absolute URL every time. That is, use href="/src/App.css" However, it looks like you're using a framework and not plain HTML/CSS. If your files are being compiled into the actual web application, you'll need to use the path for the final output, not the source location, but your framework will provide a variable for this that you tack onto the start of your path instead of the /.

(The problem with using relative paths like ../ is that you'll have to change the path for every different level in your file hierarchy, which is a recipe for inconsistency and bugs. The absolute path is the same for every file in your application.)

Upvotes: 1

ameer nagvenkar
ameer nagvenkar

Reputation: 401

Get Rid of the ./ and start with ../

../ will take you to the root of your project and the you can traverse to the required file from there.

<link rel="stylesheet" href="../path-to-file.css" />

Upvotes: 0

Irin
Irin

Reputation: 1276

Put your index.css file into public file and add it to your index.html file by using this command 

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

You cant put the file at root level and link it from index.html. But in react its best to style by adding separate component.

Upvotes: 0

Related Questions