Home > OS >  How do I link my one CSS file to all my HTML files which are in different folders?
How do I link my one CSS file to all my HTML files which are in different folders?

Time:01-13

I tried accessing CSS from the parent folder in order for it to be the only CSS file. I get an error when trying to access it.

GET http://localhost:3000/style.css net::ERR_ABORTED 404 (Not Found)
app.Static("/", "static/home")
# static/home has index.html
app.Static("/signup", "static/signup", #options)
# static/signup has signup.html

My CSS works fine when I put it in a folder selected by app.Static. However I want just 1 CSS file that all of my html files can access. Therefore I would like it in the static folder but for some reason my HTML files can't access it.

<link rel="stylesheet" href="../style.css">
# Both files have this link tag

I'm guessing the issue is that I am approaching the problem wrong and app.Static can't see outside of the folder it selects?

CodePudding user response:

The link’s href attribute should be an absolute path:

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

Since the HTML files loaded in the browser will have a path starting with /signup, the relative resource path ../style.css might not always be a reference to /style.css.

CodePudding user response:

What you are trying to do is possible.

Assuming this structure:

├── main.go
└── static
    ├── home
    │   └── index.html
    └── style.css

You just need to set ./static as root folder.

app.Static("/", "static")

Then into ./static/home/index.html use:

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

Doing that, you can go to http://localhost:3000/home and see the content of ./static/home/index.html using ./static/style.css.

  • Related