CODEWITHSUNDEEP
c#google-chromedebuggingsassasp.net-core-mvc
rdhainaut
rdhainaut

Reputation: 3553

Asp.net Core empty .scss files in Browser

I develop a Asp.net Core MVC WebApplication under Visual Studio 2015. I m working with Sass files in my web Application. To get my FrontEnd developer's life easier, I want map .css files to .scss file in my browser (Chrome).

I have added .css files and .css.map files and .scss sources files under wwwroot folder. (to be sure, it was public folder).

So my struct is 

ProjectName
  wwwroot
    css
    sass

But when I open the file in my browser, it is always empty.

I have add app.UseDirectoryBrowser(); and app.UseStaticFiles();in my Startup.cs file to be sure, it works.

I can see my file but when I click on it, ... nothing happends (white page).

What I have missing ?

Upvotes: 3

Views: 2176

Answers (2)

LRitter
LRitter

Reputation: 154

rdhainaut's answer worked for me, but if you're storing your sass files in a folder outside of webroot you have to add a file provider that finds it in your app directory in the startup.cs file. I'm not sure if this would be considered a best-practice, but it is an option.

public void Configure(IApplicationBuilder app, IHostingEnvironment env,
    ILoggerFactory loggerFactory)
{
     //do something

     app.UseStaticFiles(new StaticFileOptions()
            {
                FileProvider = new PhysicalFileProvider(
              Path.Combine(Directory.GetCurrentDirectory(), @"SassyStyles")),
                RequestPath = new PathString("/SassyStyles"),
                ContentTypeProvider = provider
            });

     //do more stuff

}

Upvotes: 1

rdhainaut
rdhainaut

Reputation: 3553

I have found the solution. I need to add the correct MIME type for .scss file in Startup.cs file.

public void Configure(IApplicationBuilder app, IHostingEnvironment env,
    ILoggerFactory loggerFactory)
{
    if (env.IsDevelopment())
    {
        app.UseDirectoryBrowser();

        var provider = new FileExtensionContentTypeProvider();
        // Add .scss mapping
        provider.Mappings[".scss"] = "text/css";
        app.UseStaticFiles(new StaticFileOptions()
        {
            ContentTypeProvider = provider
        });
    }
    else
    {
        app.UseStaticFiles();
    }
}

Upvotes: 10

Related Questions