如何在blazor中使用Sass？

Question

我在 razor 中找到了关于 Css 的MS DOC 。但它不适用于 Scss 文件。

我通过创建两个文件解决了这个问题：css 和 scss。 并使用 sass --watch。 但是每次创建新组件时我都需要写这个。

Answer 1

不幸的是，SASS 不支持 CSS Blazor 的隔离功能。至少，目前不支持。

在我们的项目中，我们使用 CSS Isolation 来实现 CSS 组件隔离功能，但是我们使用 SASS 文件来管理我们的主题，因为我们希望应用程序的风格。

话虽这么说，如果你真的需要一些 SASS 作为一个独特的组件，你完全可以，例如添加一个具有指定 id 的包装器，并在你的 scss 文件中使用这个 id，并为其指定一个专用名称，例如MyComponent.scss 。

此外，我找到了这篇文章，但我宁愿不使用它，因为它的设置有点繁重，但这取决于你： https://joren-thijs.medium.com/how-to-add-scss -支持 blazor-cd2a62995441

Answer 2

您可以使用支持普通和独立 scss 的AspNetCore.SassCompiler 。 我相信它在使用 Blazor 服务器时有一个手表模式，目前还不支持 WASM。

它还可以使用源映射进行缩小。