如何在Blazor中使用Sass？解决重复创建文件的低效问题

针对Razor组件CSS隔离不支持Scss，且手动创建对应文件+sass --watch效率低的问题，给你几个高效解决方案：

1. 配置项目文件自动编译Scss #

修改你的项目.csproj文件，添加MSBuild编译规则，让Scss文件自动编译为Razor隔离所需的.razor.css文件，无需手动操作：

<Project Sdk="Microsoft.NET.Sdk.Web">
  <!-- 保留原有配置 -->

  <ItemGroup>
    <!-- 匹配所有组件目录下的Scss文件 -->
    <SassCompile Include="Components/**/*.scss" />
  </ItemGroup>

  <Target Name="AutoCompileScssForIsolation" BeforeTargets="Build">
    <!-- 将每个Scss文件编译为同名的.razor.css -->
    <Exec Command="sass %(SassCompile.Identity) %(SassCompile.RelativeDir)%(SassCompile.FileName).razor.css" />
  </Target>
</Project>

每次执行构建命令，或是在VS中保存文件时，所有Scss都会自动编译成对应组件的隔离CSS，新建组件时只需创建.scss文件即可。

2. 全局Sass监听命令 #

不用每次新建组件都单独启动watch，直接用一条命令监听整个组件目录的Scss文件变化，自动编译：

sass --watch Components/:Components/ --style expanded --no-source-map

这条命令会监听Components目录下所有.scss文件，一旦文件新建或修改，就自动编译为同目录下同名的.razor.css文件，全程无需额外操作。

3. 集成前端构建工具（适合复杂项目） #

如果项目已经使用Webpack、Vite等前端工具，可以配置对应的Sass编译规则，自动输出符合Razor隔离要求的CSS：

• Webpack：使用sass-loader+css-loader，配置规则匹配.scss文件，输出文件名改为[name].razor.css
• Vite：安装sass依赖后，在vite.config.js中添加配置，指定输出目录和文件名规则，确保编译后的CSS与Razor组件对应

注意事项 #

• 确保Scss文件名和对应Razor组件名完全一致（比如MyComponent.razor对应MyComponent.scss），编译后的.razor.css才能被Razor隔离机制正确识别
• 若使用MSBuild方案，可添加增量编译配置提升效率，避免每次全量编译

内容的提问来源于stack exchange，提问作者Roman Nichi