将 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 的内容（可能需要稍微修改一下）：

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

B) 以某种方式让 .csproj 中的 <None Remove="**/*.razor.css" /> 工作。就像现在一样，处理 CSS 隔离的引擎不会查看排除的文件。

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

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

Proper way to add SASS to .NET 6 Blazor application?

css

sass

blazor

blazor-webassembly