I've been trying my best to use a scoped CSS file (using Stylance) for styling a Leptos component, and it seems to work but the styles simply don't apply. The file is read correctly by Stylance and the module is generated correctly, but on the render, the styles aren't there.
Here is my project's structure:
Cargo.toml
index.html
dist/ ...
target/ ...
src/
- lib.rs
- main.rs
- test.module.css
In main.rs I have the following code:
use leptos::*;
use my_crate_name::*; // to import my stuff from lib.rs
pub fn main() {
mount_to_body(|| view! { <App /> });
}
#[component]
fn App() -> impl IntoView {
view! { <MyLibraryCustomComponent /> }
}
In lib.rs:
use stylance::import_crate_style;
import_crate_style!(style, "src/test.module.css");
#[component]
pub fn MyLibraryCustomComponent() -> impl IntoView {
view! { <h1 class=style::test>"This is a title"</h1> }
}
And finally here is my test.module.css that I wrote:
.test {
color: blue;
}
I serve the app on localhost:8080 (using trunk serve) and with the dev console I can see that my <h1> element has the class test-aRandomHash. So far this is normal and intented. What's not normal is that I can't see anywhere my "color: blue" style. The <h1> element simply doesn't have it, like it didn't exist, which is weird since Stylance has read the file and extracted the class.
I'm new to Leptos and Stylance so I've basically no idea what I'm doing. The documentation for using Stylance with Leptos is very small and basically non-existent (https://book.leptos.dev/interlude_styling.html#stylance-scoped-css-written-in-css-files).
Note that I'm not using Nightly.
EDIT: I tried using :global(.test) in the css file and it didn't change a thing. My h1 element isn't blue.
All right, I had misunderstood the documentation of Stylance. I had to create a bundle with stylance-cli and use this bundle. I'm not sure how I'm supposed to use it though, but I eventually settled on another solution (https://trunkrs.dev/assets/#css)