dotnet / dotnet/aspnetcore

BLAZOR: Integrate CSS (including preprocessors) into .razor files

Open
#47,586 9 comments 10 reactions 0 assignees View on GitHub
area-blazor enhancement
Dominant language
C#
Stars
38.4k
Forks
10.9k
Avg merge
2d 5h
Merged PRs (30d)
276

Description

### Is there an existing issue for this?

- [X] I have searched the existing issues

### Is your feature request related to a problem? Please describe the problem.

I would like `.razor` files to be able to contain and handle CSS in a similar manner to `.vue` or `.svelte` files. This includes preprocessor support, scoped CSS and CSS modules.

At present, `.razor` files can either have

1. a backing 'Code Behind' `.razor.cs` file, or
2. the code integrated directly inside it

However, even if you choose the latter, you are still required to have a separate file for CSS. It should be possible to integrate CSS into the `.razor` file

### Describe the solution you'd like

```

Arbitrary .razor template

@code {
// arbitrary C# component code
}

// CSS goes here; can go anywhere in file, not just bottom

```

### Additional context

https://vuejs.org/api/sfc-css-features.html CSS blocks in Vue SFCs
https://vue-loader.vuejs.org/guide/pre-processors.html#sass CSS preprocessors in Vue SFCs

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.