Использование простого CSS-файла с Trunk/Yew
Я пытаюсь использовать простой файл CSS, упакованный с помощью Trunk, для использования CSS в Yew. Я считаю, что правильно следовал документации, и она почти работает. Сборка магистрали помещает хешированный файл CSS в правильную папку, но тег ссылки с хешированным именем файла не попадает в результирующий файл index.html. Вот минимальный воспроизводимый пример.
Структура файла: Структура файла
Транк.томл:
[build]
dist = "/usr/share/nginx/html"
public_url = "/"
release = false
индекс.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>
}
}
стили.css:
body {
background-color: red;
font-size: 5em;
color: green;
}
Отрисованный HTML — никаких стилей. Отрисованный HTML
Я ожидаю, что файл HTML будет иметь ссылку на файл CSS. Как видите, для файла CSS нет тега ссылки, который был хеширован и помещен в правильное место.
<!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>
Выходная папка: файл CSS хешируется и помещается в правильное место (см. изображение ниже). Обратите внимание: если я вручную изменю визуализированный HTML-код после этого, стиль вступит в силу, как и ожидалось. Но я ожидаю, что этот транк во время сборки поместит это хешированное имя файла в HTML.
Ответы 1
HTML-теги в <head> выглядят запутанными
Я изменил строку <h2>Loading...</h1> на <title>Loading...</title> и у меня это сработало.
<!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>
Интересно, что при загрузке страницы я вижу стиль на долю секунды, прежде чем CSS исчезнет. Так что да, ни h1, ни h2 не являются допустимыми тегами внутри заголовка.
Отличный улов. Как только вы указали на это, я заметил, что открывающий и закрывающий теги различаются. Оказывается, их сопоставление ничего не исправляет. Но либо удаление этой строки, либо превращение ее в тег заголовка заставит ее работать. Видимо там что-то в парсере транка глючит.