SASS in ASP.NET Core: map files point to incorrect location

Question

I have an ASP.NET Core application, and I am using SASS to generate the css.

My project file structure is this:

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

The CSS file can be reached through the web path /css/index.css.

I want to be able to diagnose the css rules via the SASS file in Chrome Developer tools.

The problem is that Chrome uses the map, but is given an incorrect path to the SASS file. It thinks the fileis at the location /css/wwwroot/css/index.scss, not /css/index.scss.

Below are the contents of the file compilerconfig.json.defaults

Is there another setting I can add so that SASS files are located at the correct path?

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

Andrew Shepherd · Answer 1 · 2019-09-12T00:36:12.487

I had to resort to a hack workaround.

I know that the browser will ask for .scss paths at the location /css/{garbage}/wwwroot/{correctpath}

So I inserted a special static files middleware in the pipeline, just to serve .scss files:

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();
}

score 0 · Answer 2 · answered Feb 01 '22 at 20:00

In your compilerconfig.json.defaults, add:

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

This will add a "sourceRoot": "/" entry to your .map (base64 encoded or otherwise) and the browser will be able to find the .sass files. This probably assumes compilerconfig.json.defaults is in your site root so YMMV.

SASS in ASP.NET Core: map files point to incorrect location

2 Answers2