DioxusLabs
Importing CSS not working on Dioxus Desktop
Problem
On Dioxus Desktop (0.6.0-alpha.2 and alpha.3), the following syntax to import an css file is not functional:
document::Link {
rel: "stylesheet",
href: asset!("./assets/fileexplorer.css")
The above example is taken from the file explorer example project in this repo. Indeed, upon dx serve of this project, the styling is obviously broken
Steps To Reproduce
Steps to reproduce the behavior:
- Include css using the above syntax
- Run
dx serve - CSS not working
- Look at inspector: you can see the file (e.g.,
dioxus://index.html/maincssad0597f224a3fdb7.css). However, you get "An error occured trying to load this resource." in the inspector when trying to open the file
Expected behavior CSS file is included and CSS is applied
Environment:
- Dioxus version: 0.6.0-alpha.2
- Rust version: latest stable
- OS info: Arch Linux
- App platform: Desktop
I'm running 0.5.7 (Desktop) on Windows and OSX and the default CSS that comes with the newly created project when you run dx new doesn't load as well
I'm not sure if dx new actually imports the CSS file by default; iirc I don't think it does for 0.6.0 on Desktop? I might be wrong though. The macro still doesn't seem to work though, or it's corrupting the CSS file somehow
not sure if I have some wrong settings but having the same issues on web. This also includes assets like images etc
Oh really? What version? I was testing web on 0.6.0-alpha.2 and it seemed fine, using the new head::Link and asset! syntax
Update: If there are any Dioxus devs here, it would be great if you could confirm whether or not you are aware of this bug and/or what might be causing it. I am on the Discord and it seems many people can replicate it; one person pointed out that doing something like href: format!("/{}", asset!("assets/main.css")) causes the file to no longer show as unloadable. However, the file still shows as empty and the CSS doesn't apply.
Update: If there are any Dioxus devs here, it would be great if you could confirm whether or not you are aware of this bug and/or what might be causing it. I am on the Discord and it seems many people can replicate it; one person pointed out that doing something like href: format!("/{}", asset!("assets/main.css")) causes the file to no longer show as unloadable. However, the file still shows as empty and the CSS doesn't apply.
Update 2: If you do dx new and select tailwind it uses a syntax which can be modified to function properly. Here is how I successfully integrated it:
fn main() {
let cfg = Config::new()
.with_window(WindowBuilder::new().with_resizable(true))
.with_custom_head(r#"<link rel="stylesheet" href="./assets/main.css">"#.to_string());
dioxus::LaunchBuilder::desktop().with_cfg(cfg).launch(App)
}
However, the fact that document::Link doesn't work is clearly a bug, so I will leave this issue open
Did some testing and this is because of the working directory that dx runs the app executable from. The starting directory that the desktop app looks for assets in doesn't match where the asset is actually on disk. If you run the desktop app from the same folder the assets are in, it works correctly.
I believe we had fixed this in the past but we're also going through a few changes to how the asset system works which could've broken it again.
This has been fixed in #2779.
Additionally, paths in the asset macro should start with absolute paths relative to the crate root. e.g. /assets/main.css for
- my-cool-project (crate root)
- assets
- main.css
- src
- Cargo.toml
