Why does the css not link with the html (rocket.rs, html and css code)

Code Help HTML/CSS/JS
1

Question:
hey everyone, i think the question describes itself quite nicely:
“why does the css not link with the html (rocket.rs, html and css code)”

ive tried almost everything that people have said and i think its an issue with rocket.rs rather than html

Repl link:
https://replit.com/@DiceBunny/website-test?v=1

2

Replace <link rel="stylesheet" href="/style.css" type="text/css" /> with <link rel="stylesheet" href="style.css" type="text/css" />

3

sadly that didnt work for me

4

Ah, you’re right. You need to change the Rust file.

#[macro_use] extern crate rocket;
use std::fs;
use rocket::response::content::{RawCss, RawHtml};

#[get("/")]
fn index() -> RawHtml<String> {
    let index_html = fs::read_to_string("static/index.html")
        .unwrap_or_else(|err| format!("Error: {}", err));
    RawHtml(index_html)
}

#[get("/static/style.css")]
fn style() -> RawCss<String> {
    let style_css = fs::read_to_string("static/style.css")
        .unwrap_or_else(|err| format!("Error: {}", err));
    RawCss(style_css)
}

#[launch]
fn rocket() -> _ {
    rocket::build().mount("/", routes![index, style])
}
5

i think we are getting closer but it cant fetch the css for some reason:

:mailbox_with_mail: Routes:

(index) GET /
(style) GET /static/style.css
:satellite: Fairings:
Shield (liftoff, response, singleton)
:shield: Shield:
Permissions-Policy: interest-cohort=()
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
:rocket: Rocket has launched from http://0.0.0.0:6000
GET /:
Matched: (index) GET /
Outcome: Success(200 OK)
Response succeeded.
GET /style.css text/css:
No matching routes for GET /style.css text/css.
No 404 catcher registered. Using Rocket default.
Response succeeded.
GET /style.css text/css:
No matching routes for GET /style.css text/css.
No 404 catcher registered. Using Rocket default.
Response succeeded.

6

In your index.html the CSS file is referenced as being in the root folder

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

However, looking at your project the CSS file is inside the folder /static/style.css

So, just adjust the path:

<link rel="stylesheet" href="/static/style.css" type="text/css" />
3 Likes