2

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

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

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

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

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

问题是 Chrome 使用地图，但给出的 SASS 文件路径不正确。它认为文件在该位置/css/wwwroot/css/index.scss，而不是/css/index.scss。

在此处输入图像描述

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

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

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

2 回答 2

1

我不得不求助于黑客解决方法。

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

所以我在管道中插入了一个特殊的静态文件中间件，只是为了提供 .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();
}
于 2019-09-12T00:03:02.023 回答
0

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

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

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

于 2022-02-01T20:00:29.967 回答