Getting Error while trying to use stylist on my app in yew

Question

this is my code in Yew


use yew::prelude::*;
use gloo::console::*;
use serde::{Serialize, Deserialize};
use stylist::{yew::styled_component, style};

const STYLE_FILE: &str = include_str!("main.css");

#[styled_component(App)]
pub fn app() -> Html {
    let stylesheet = Style::new(STYLE_FILE).unwrap();

    html! {
        <>
        <h1 class={stylesheet}>{"Hello World"}</h1>
        if obj.username == "a" {
            <p>{"a"}</p>
        } else {
            <p>{"b"}</p>
        }
        </>
    }
}

I'm getting error here at #[styled_component(App)].

It says:

error: linking with cc failed: exit status: 1

error: could not compile `stylist-macros` (lib) due to previous error
2023-06-13T23:51:37.351135Z ERROR \u274c error
error from HTML pipeline

My architecture is arm64 (M1 chip) Ubuntu via UTM. I'm serving my app via trunk serve. And my stylist crate looks like this: stylist = {version = "0.10.0", features = ["yew"]}

collinsmarra · Answer 1 · 2023-06-15T19:05:01.647

you seem to be using style. You should import Style


use yew::prelude::*;
use gloo::console::*;
use serde::{Serialize, Deserialize};
use stylist::{yew::styled_component, Style};

const STYLE_FILE: &str = include_str!("main.css");

#[styled_component(App)]
pub fn app() -> Html {
    let stylesheet = Style::new(STYLE_FILE).unwrap();

    html! {
        <>
        <h1 class={stylesheet}>{"Hello World"}</h1>
        if obj.username == "a" {
            <p>{"a"}</p>
        } else {
            <p>{"b"}</p>
        }
        </>
    }
}

Getting Error while trying to use stylist on my app in yew

1 Answers1