DioxusLabs / DioxusLabs/dioxus
Hot reload for @use files when using scss
- Dominant language
- Rust
- Stars
- 39.1k
- Forks
- 1.9k
- Avg merge
- 4d 10h
- Merged PRs (30d)
- 4
Description
## Feature Request
Currently when using at-rule 'use' on an scss asset the file is properly picked by the scss compiler. One way to validate that is to add an invalid @use rule:
```
10:56:29 [dev] Failed to hash asset /code/cadence/crates/app/assets/main.scss: Failed to compile scss file: /code/cadence/crates/app/assets/main.scss
10:56:36 [dev] Failed to copy asset "/code/cadence/crates/app/assets/main.scss": Failed to compile scss file: /code/cadence/crates/app/assets/main.scss
10:56:36 [dev] Build failed: Failed to write assets
1: Failed to compile scss file: /code/cadence/crates/app/assets/main.scss
2: Error: Can't find stylesheet to import.
╷
1 │ @use './nowhere'
│
╵
.//code/cadence/crates/app/assets/main.scss:1:1
```
On the other hand, adding a valid import will work as expected but this breaks hot reload.
To reproduce:
```scss
// assets/style.scss
@use './other-style.scss'
```
```scss
// assets/other-style.scss
.some-class {
color: red
}
```
```rs
// in your dioxus component
const MAIN_CSS: Asset = asset!("/assets/style.scss");
// ...etc
```
Now running `dx serve` we can observe the following:
- making changes to `style.scss` does hotreload (event the content of `other-style.scss`) ✔️
- making changes to `other-style.scss` does not hotreload 🔴
## Implement Suggestion
I don't think grass provide a way to access the scss AST but `@use` rules in have the following rule:
> A stylesheet’s @use rules must come before any rules other than @forward, including [style rules](https://sass-lang.com/documentation/style-rules). However, you can declare variables before @use rules to use when [configuring modules](https://sass-lang.com/documentation/at-rules/use/#configuration).
As far as I understand the `@uses` paths are already watched by `dx serve`, but they are ignored because not declared as dioxus `Asset`.
Adding a tiny parser to scan SCSS assets for @use paths and keep a list of scss indirection in the build context would be enough to rebuild the parent file instead of the ignored `@use` file.
## Rationale
This improves the development experience by ensuring changes to any included SCSS partial are immediately reflected without requiring a manual restart or a full rebuild
I am not familiar with dioxus internals yet but I'd be happy to try implementing this if this is something you would like implement.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.