rusttrunkyew

Using simple CSS file with Trunk / Yew

I am attempting to use a simple CSS file, packaged with Trunk, to use CSS in Yew. I believe I've followed the documentation correctly, and it's almost working. The trunk build puts the hashed CSS file in the correct folder, but the link tag with the hashed filename doesn't end up in the resultant index.html file. Here's the minimum reproducible example.

File structure: File structure

Trunk.toml:

[build]
dist = "/usr/share/nginx/html"
public_url = "/"
release = false

index.html:

<!doctype html>
<html lang="en">
<head>
    <h2>Loading...</h1>
    <link data-trunk rel="css" href="src/static_html/styles.css" />
    <meta charset="utf-8">
</head>
<body>
    <h3>This should display while loading</h3>
</body>
</html>

main.rs:

use yew::{html, Html};
use yew::function_component;

fn main() {
    yew::Renderer::<Main>::new().render();
}

#[function_component]
fn Main() -> Html {
    html! {
        <div>
            {"I expect large green text on a red background"}
        </div>
    }
}

styles.css:

body { 
    background-color: red; 
    font-size: 5em;
    color: green;
}

The rendered HTML -- no styles at all. Rendered HTML

I would expect the HTML file to have a link to the CSS file. As you can see, there's no link tag for the CSS file, which has been hashed and placed in the correct place.

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<link rel="preload" href="https://ferrywizard.diverdaniel.com/minimum_yew-7ace0fdbec74656b_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
<link rel="modulepreload" href="https://ferrywizard.diverdaniel.com/minimum_yew-7ace0fdbec74656b.js">
</head>
<body>
<div>This should be large green text on a red background</div>
</body>
</html>

Output folder: the CSS file is being hashed and placed in the correct spot (see below image). Note that if I manually alter the rendered HTML after the fact, the styling takes effect as expected. But I expect that trunk, when it's doing the build, will put that hashed filename into the HTML.

Build output folder

Solution

  • HTML tags in <head> look messed up

    I changed the line <h2>Loading...</h1> to <title>Loading...</title> and it worked for me

    <!doctype html>
<html lang="en">
<head>
    <title>Loading...</title>
    <link data-trunk rel="css" href="src/static_html/styles.css" />
    <meta charset="utf-8">
</head>
<body>
    <h3>This should display while loading</h3>
</body>
</html>

    result