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

【问题标题】：Proper way to add SASS to .NET 6 Blazor application?将 SASS 添加到 .NET 6 Blazor 应用程序的正确方法？
【发布时间】：2021-12-04 01:46:14
【问题描述】：

所以我一直在搜索，似乎使用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 文件包含什么，因为它已被缩小等等。

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

【问题讨论】：

MainLayout.razor.css.scss 是一种让文件嵌套工作的简单方法。它的顺序与您想要的相反。但我认为逻辑上还可以：.razor 需要 .css .css 需要 .scss
@BrianParker 是的，但是 Delegate.SassBuilder 创建了图片 #2 中看到的文件。我不能重命名它们，因为那只会创建一个新文件

标签： css sass blazor blazor-webassembly

【解决方案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，因为这似乎可行：

【讨论】：