use_css

除了使用 use_css! 宏，还可以直接使用 stylist 包。但你会遇到的问题是VSCode将无法提供完整的CSS代码功能集。因此，最好的解决方案是使用CSS文件。现在唯一的问题就是：如何在你的Yew项目中使用CSS代码？嗯，你需要基于这些文件生成Rust代码。为此，你可以使用这个宏。

示例

假设这是你的项目结构

│
├── frontend
│  ├── src
│  │  ├── title_bar
│  │  │  ├── mod.rs
│  │  │  └── style.css // This file has to be call like this
│  │  └── main.rs
│  ├── Cargo.toml
│  ├── Cargo.lock
│  └── index.html

其中 style.css 看起来像这样

/* The name of titlebar should be unique to this file */
titlebar {
    display: flex;

    height: 10px;
    width: 10px;
}

/* This macro also accepts `.` and `#` before the name */
/* And even type errors like shown below */

.global{
    --background-color: #000000;
    --font-color: #FFFFFF;
}
/* And we can use nested styles */
#global_document     {
    html, body {
        background-color: var(--background-color);
        color: var(--font-color);
    }
}

要在 mod.rs 中使用此样式，你可以写如下

use yew::prelude::*;
use use_css::use_css;

// The string given should be the path, starting from `scr/`, to the
// folder where the desired `style.css` can be found.
use_css!("title_bar");

// here we first apply our global styles
// and then we apply styles for actual elements
#[function_component]
pub fn TitleBar() -> Html {
    html! {
        <>
            <Global css={style::global()}/>
            <Global css={style::global_document()}/>

            <div class={style::titlebar()}>
                <span>{"Hello world"}</span>
            </div>
        </>
    }
}