#style #css #scoping #macro #modules-like

css-loader

一个简单的宏,用于在 Rust 中使用类似 CSS Modules 的作用域包含样式文件

1 个不稳定版本

0.0.1 2022年8月18日

#4 in #scoping

MIT/Apache

3KB

rust-css-loader

一个简单的宏,用于在 Rust 中使用类似 CSS Modules 的作用域包含样式文件。

示例

main.rs

use yew::prelude::*;

import_style!("src/styles.scss");

#[function_component(App)]
fn app() -> Html {
    html! {
        <h1 class={styles.header}>{ "Hello World" }</h1>
    }
}

fn main() {
    println!("Hello, world!");
    yew::start_app::<App>();
}

styles.scss

$textcolor: yellow;
$fontsize: 18px;

.header {
  color: $textcolor;
  font-size: $fontsize;
}

注意

样式文件是相对于 CARGO_MANIFEST_DIR 导入的,基本上是包含 Cargo.toml 文件的目录。虽然很希望像 JavaScript 一样进行相对路径导入,但是由于 Rust 编译器的一个小 限制,目前无法实现。

其次,同样的限制阻止我们有一种将样式文件“链接”到 Rust 源文件的方法,因此修改样式文件不会触发重建/重新加载。

这两个问题将在 Rust 编译器中稳定该 API 之后得到解决。

.css 文件直接导入,而 .scss 则使用 rsass 编译并自动加载。

依赖

~12MB
~242K SLoC