浏览器中的 Asp.net Core 空 .scss 文件答案

【问题标题】：Asp.net Core empty .scss files in Browser浏览器中的 Asp.net Core 空 .scss 文件
【发布时间】：2016-06-16 14:12:45
【问题描述】：

我在 Visual Studio 2015 下开发了一个 Asp.net Core MVC WebApplication。我正在我的网络应用程序中使用 Sass 文件。为了让我的前端开发人员的生活更轻松，我希望将 .css 文件映射到浏览器 (Chrome) 中的 .scss 文件。

我在 wwwroot 下添加了 .css 文件和 .css.map 文件和 .scss 源文件文件夹。（可以肯定的是，它是公共文件夹）。

所以我的结构是

项目名万维网根 css 粗鲁的

但是当我在浏览器中打开文件时，它总是空的。

我在我的 Startup.cs 文件中添加了 app.UseDirectoryBrowser(); 和 app.UseStaticFiles(); 以确保它有效。

我可以看到我的文件，但是当我点击它时，……什么也没有发生（白页）。

我错过了什么？

【问题讨论】：

标签： c# google-chrome debugging sass asp.net-core-mvc

【解决方案1】：

我找到了解决方案。我需要在 Startup.cs 文件中为 .scss 文件添加正确的 MIME 类型。

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

【讨论】：

【解决方案2】：

rdhainaut 的回答对我有用，但是如果您将 sass 文件存储在 webroot 之外的文件夹中，则必须添加一个文件提供程序，该文件提供程序可以在 startup.cs 文件的应用程序目录中找到它。我不确定这是否会被视为最佳做法，但这是一种选择。

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

}

【讨论】：