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
Daniel McMath is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.