将 SASS 添加到 .NET 6 Blazor 应用程序的正确方法？

Question

因此，我进行了一些搜索，似乎使用Delegate.SassBuilder是将 SASS 添加到 Blazor 项目的好方法。它会检测任何 .scss 文件并将它们构建到同一目录中的 .css 文件中。

它按预期工作，但是，我正在寻找有关“代码隐藏”文件的更多自定义，但使用 CSS 文件代替（不确定除了“代码隐藏但用于 css”之外正确的术语是什么）。默认情况下，您的 Blazor 应用程序将包含如下文件：

因此，您有一个 .razor 文件，然后有一个 .razor.css 文件。在index.html 中，它会<link href="projectname.styles.css" rel="stylesheet" />自动添加来处理这些样式。

但是，如果我将该 .css 文件重命名为 .scss 并构建应用程序，我最终会得到以下结果：

它可以工作，但我必须先构建它，然后运行该应用程序。很烦人。同样令人烦恼的是文件不再嵌套。我希望看到这样的东西：

更好的是，.css 文件是隐藏的，我只需要处理 .scss 文件。老实说，我不在乎 .css 文件包含什么，因为它已经被缩小了等等。

一定有更好的方法，但我实在找不到。

Answer 1

好吧，看来我有两个选择：

A) 创建一个 .filenesting.json 文件并将其作为扩展名的内容（可能需要稍作修改）：

"extensionToExtension": {
  "add": {
    ".razor.css": [ ".razor.scss" ],
    ".razor.css.map": [ ".razor.css" ],
    ".css": [ ".scss" ],
    ".razor.scss": [ ".razor" ],
    ".cs": [ ".cshtml", ".razor" ]
  }
}

B）以某种方式得到<None Remove="**/*.razor.css" />.csproj 工作。目前，处理 CSS 隔离的引擎不会查看排除的文件。

现在我会坚持使用选项 A，因为这似乎可行：