Blazor Fluent UI custom styling

Question

I've been browsing the internet for some time now. But, unfortunately, with no success. As an independent contractor, one of my clients asked to create a POC for a Blazor server side app with Fluent UI. Adding Fluent UI to the Blazor App is no problem. Though, one of the criteria is that the Fluent UI components must be customized in size, spacing, color, etc... to company platform guidelines (no Fluent UI templates).

I've found some articles like:

• https://fluentui-blazor.net
• Blazor Fluent UI example doesn't generate styles.css
• Set site wide style or theme for Blazor with fluent-ui
• https://fluentui-blazor.net/DesignTokens
• https://github.com/design-tokens/community-group#design-tokens
• https://www.fast.design/

But, this doesn't help me to move forward. For the Design Tokens, I've found something, but react related. Unfortunately, I'm not a react developer.

The app needs to use (as spec by client) SASS/SCSS for CSS compiling. Does anyone has an example on how to achieve this? Is it even possible?

Any help or guidance would be much appreciated.

Answer 1

Check out hTWOo. It is built on Fluent Design but is only HTML/CSS and SASS. It also includes all the Fluent UI Icons icons you need, as well as all those that are downloadable.