在 Trunk / Yew 中使用简单的 CSS 文件

Question

我正在尝试使用一个简单的CSS文件，用Trunk打包，在Yew中使用CSS。我相信我已经正确遵循了文档，而且它几乎可以工作了。主干构建将散列 CSS 文件放入正确的文件夹中，但具有散列文件名的链接标记最终不会出现在生成的 index.html 文件中。这是最小的可重现示例。

文件结构：文件结构

主干.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>
    }
}

样式.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 中。

构建输出文件夹

Answer 1

<head>

中的 HTML 标签看起来很混乱

我将行

<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>

在 Trunk / Yew 中使用简单的 CSS 文件

问题描述投票：0回答：1

1个回答

最新问题

在 Trunk / Yew 中使用简单的 CSS 文件

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1