ASP.NET Core 中的 SASS：地图文件指向不正确的位置答案

【问题标题】：SASS in ASP.NET Core: map files point to incorrect locationASP.NET Core 中的 SASS：地图文件指向不正确的位置
【发布时间】：2022-02-02 04:00:29
【问题描述】：

我有一个 ASP.NET Core 应用程序，我正在使用 SASS 生成 css。

我的项目文件结构是这样的：

ProjectName
   |
   --- wwwroot
          |
          --- css
               |
               --- index.scss
                       --- index.css
                       --- index.min.css

可以通过网络路径/css/index.css访问CSS文件。

我希望能够通过 Chrome 开发者工具中的 SASS 文件诊断 css 规则。

问题是 Chrome 使用地图，但提供的 SASS 文件路径不正确。它认为文件位于/css/wwwroot/css/index.scss，而不是/css/index.scss。

以下是文件compilerconfig.json.defaults的内容

我可以添加其他设置以使 SASS 文件位于正确的路径吗？

{
    "compilers": {
        "sass": {
          "sourceMap": true
        }
    }
}

【问题讨论】：

标签： asp.net-core sass web-compiler

【解决方案1】：

我不得不求助于破解解决方法。

我知道浏览器会在/css/{garbage}/wwwroot/{correctpath}位置询问.scss路径

所以我在管道中插入了一个特殊的静态文件中间件，只是为了提供 .scss 文件：

class ScssFileProvider : IFileProvider
{
    private readonly IFileProvider _contentRootFileProvider;

    public ScssFileProvider(IFileProvider contentRootFileProvider)
    {
        _contentRootFileProvider = contentRootFileProvider;
    }

    IFileInfo IFileProvider.GetFileInfo(string subpath)
    {
        var wwwRootIndex = subpath.IndexOf("/wwwroot/");
        if(wwwRootIndex != -1)
        {
            subpath = subpath.Substring(wwwRootIndex);
        }
        return _contentRootFileProvider.GetFileInfo(subpath);
    }

    IDirectoryContents IFileProvider.GetDirectoryContents(string subpath) => throw new NotImplementedException();

    IChangeToken IFileProvider.Watch(string filter) => throw new NotImplementedException();
}

private static void ServeScssFiles(IApplicationBuilder app, IHostingEnvironment env)
{
    var sassContentTypeProvider = new FileExtensionContentTypeProvider();
    sassContentTypeProvider.Mappings[".scss"] = "text/css";
    app.UseStaticFiles(
        new StaticFileOptions
        {
            ContentTypeProvider = sassContentTypeProvider,
            RequestPath = "/css",
            FileProvider = new ScssFileProvider(env.ContentRootFileProvider),
        }
    );
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseStaticFiles();
    ServeScssFiles(app, env);
    app.UseMvcWithDefaultRoute();
}

【讨论】：

【解决方案2】：

在您的compilerconfig.json.defaults 中，添加：

{
  "compilers": {
    "sass": {
      "sourceMapRoot": "/"
    }
  }
}

这将在您的 .map 中添加一个 "sourceRoot": "/" 条目（base64 编码或其他方式），浏览器将能够找到 .sass 文件。这可能假设 compilerconfig.json.defaults 在您的站点根目录中，所以 YMMV。

【讨论】：