Error loading CSS file, cannot find directory

Asked

Viewed 152 times

-2

I’m making a simple app, but I’m getting all confused in accessing the folders. I want to call the about.css file inside the layout.njk file. The directories I’ve tried none of worked.

The structure of my folders are these:

inserir a descrição da imagem aqui

layout file.njk

inserir a descrição da imagem aqui

file about.njk

inserir a descrição da imagem aqui

My file server.js:

inserir a descrição da imagem aqui

I’m looking to access the localhost route.

javascript html5 node.js css3 express

  • What error gives you? You have tried to put the absolute path of the CSS file?

  • No error, just don’t click. I’ve tried the absolute path.

  • It seems that in this case your CSS file is being loaded from another folder

  • 1

    @Ruth Maria when posting the code Avoid putting in images this makes it difficult for those who will analyze your question.

  • 1

    Thanks for telling me, @Edu Mendonça. I didn’t know.

2 answers

1


In your file layout.njk you are returning a level to import the about.css where the folder styles exists only in the public folder.

How you are serving the folder public as static, you can import css like this

<link rel="stylesheet" type="text/css" href="/styles/about.css" >

Make sure your folder public is being exposed in the archive server.js change the existing line to that

server.use(express.static(`${__dirname}/public`))

  • Hi, Filipe. I tried this solution and it still didn’t work :'(

  • I edited the answer, can you please check?

  • FUNCIONOUUUUUUUUUUUUU... Thank you very much ^.^

  • Dispose, I’m glad to know it worked.

0

Your file layout.nkj this in site/views when you return a directory, consequently you will work inside the directory site, then let’s say the .. would be the index site and to reach the about.css we’d have to go the rest of the way site/public/styles/about.css and so we will replace the site for .. being like this:

<link rel="stylesheet" href="../public/styles/about.css" >

  • Hi, Thiago. I tried this solution and it still didn’t work :'(

Browser other questions tagged javascript html5 node.js css3 express

You are not signed in. Login or sign up in order to post.