.NET Core+Webpack应用中动态注入CSS样式的实现方案问询

听起来你遇到的核心问题是静态文件中间件优先拦截了CSS请求，导致你的自定义中间件没机会处理。在.NET Core里，UseStaticFiles默认会优先处理wwwroot下的静态资源，直接返回文件内容，所以你的中间件如果放在它之后，根本不会被触发。下面给你几个可行的实现方案，从简单到更符合.NET Core设计模型的都有：

方案一：调整中间件顺序，拦截CSS请求处理替换 #

这是最直接的方案，和你之前.NET Framework的思路类似，只需要把自定义中间件放在UseStaticFiles前面，专门拦截CSS请求并处理替换：

代码示例（.NET 6+ Program.cs） #

// 先添加自定义CSS处理中间件，再添加静态文件中间件
app.Use(async (context, next) =>
{
    // 只针对.css后缀的请求做处理
    if (context.Request.Path.Value?.EndsWith(".css", StringComparison.OrdinalIgnoreCase) == true)
    {
        // 构建物理文件路径
        var cssFilePath = Path.Combine(env.WebRootPath, context.Request.Path.Value.TrimStart('/'));
        
        if (File.Exists(cssFilePath))
        {
            // 读取原始CSS内容
            var originalCss = await File.ReadAllTextAsync(cssFilePath);
            
            // 从数据库获取主题色（这里假设你有一个IThemeService封装数据库操作）
            var themeService = context.RequestServices.GetRequiredService<IThemeService>();
            var mainColor = await themeService.GetMainButtonColorAsync();
            
            // 替换占位符
            var themedCss = originalCss.Replace("##main-color##", mainColor);
            
            // 设置响应头并返回处理后的内容
            context.Response.ContentType = "text/css";
            // 可选：添加缓存控制头，避免频繁请求（注意主题变化时要更新缓存）
            context.Response.Headers.CacheControl = "public, max-age=3600";
            await context.Response.WriteAsync(themedCss);
            
            // 直接返回，不继续调用后续中间件
            return;
        }
    }
    
    // 非CSS请求或文件不存在，交给下一个中间件处理（比如静态文件中间件）
    await next();
});

// 静态文件中间件放在自定义中间件之后
app.UseStaticFiles();

注意点 #

• 一定要把自定义中间件放在UseStaticFiles前面，否则静态文件中间件会先处理请求
• 记得缓存主题色，不要每次CSS请求都查数据库——可以用IMemoryCache或者分布式缓存，缓存失效条件可以设为主题修改时间
• 生产环境要配置合适的缓存头，减少重复请求

方案二：自定义静态文件提供程序（更符合.NET Core设计） #

如果你想更优雅地整合到.NET Core的静态文件处理流程里，可以自定义IFileProvider，让静态文件中间件直接返回处理后的CSS内容：

1. 实现自定义文件提供程序和文件信息类 #

public class ThemedCssFileProvider : IFileProvider
{
    private readonly IFileProvider _innerProvider;
    private readonly IThemeService _themeService;
    private readonly IMemoryCache _cache;

    public ThemedCssFileProvider(IFileProvider innerProvider, IThemeService themeService, IMemoryCache cache)
    {
        _innerProvider = innerProvider;
        _themeService = themeService;
        _cache = cache;
    }

    public IDirectoryContents GetDirectoryContents(string subpath)
        => _innerProvider.GetDirectoryContents(subpath);

    public IFileInfo GetFileInfo(string subpath)
    {
        var originalFile = _innerProvider.GetFileInfo(subpath);
        
        // 只处理存在的CSS文件
        if (!originalFile.Exists || !subpath.EndsWith(".css", StringComparison.OrdinalIgnoreCase))
            return originalFile;

        // 用缓存避免重复读取和替换，缓存键包含主题修改时间，确保主题变化时缓存失效
        var cacheKey = $"ThemedCss_{subpath}_{await _themeService.GetThemeLastModifiedTimeAsync()}";
        var themedContent = await _cache.GetOrCreateAsync(cacheKey, async entry =>
        {
            entry.SlidingExpiration = TimeSpan.FromMinutes(15);
            using var reader = new StreamReader(originalFile.CreateReadStream());
            var cssContent = await reader.ReadToEndAsync();
            var mainColor = await _themeService.GetMainButtonColorAsync();
            return cssContent.Replace("##main-color##", mainColor);
        });

        return new ThemedCssFileInfo(originalFile, themedContent);
    }

    public IChangeToken Watch(string filter)
        => _innerProvider.Watch(filter);
}

// 自定义文件信息类，返回处理后的CSS内容
public class ThemedCssFileInfo : IFileInfo
{
    private readonly IFileInfo _originalFile;
    private readonly string _themedContent;

    public ThemedCssFileInfo(IFileInfo originalFile, string themedContent)
    {
        _originalFile = originalFile;
        _themedContent = themedContent;
    }

    public Stream CreateReadStream()
        => new MemoryStream(Encoding.UTF8.GetBytes(_themedContent));

    // 其他属性委托给原始文件信息
    public bool Exists => _originalFile.Exists;
    public long Length => Encoding.UTF8.GetByteCount(_themedContent);
    public string PhysicalPath => _originalFile.PhysicalPath;
    public string Name => _originalFile.Name;
    public DateTimeOffset LastModified => _originalFile.LastModified;
    public bool IsDirectory => _originalFile.IsDirectory;
}

2. 配置静态文件中间件使用自定义提供程序 #

var webRootProvider = new PhysicalFileProvider(env.WebRootPath);
var themedCssProvider = new ThemedCssFileProvider(
    webRootProvider, 
    app.Services.GetRequiredService<IThemeService>(),
    app.Services.GetRequiredService<IMemoryCache>()
);

app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = themedCssProvider
});

这个方案的优势是完全融入.NET Core的静态文件处理机制，自动处理文件监控、缓存逻辑，代码更模块化。

方案三：用Razor视图输出动态CSS（适合小型动态样式场景） #

如果你的动态样式部分不多，也可以直接创建一个Razor视图来输出CSS，这样可以直接在视图里注入数据库的主题色：

创建ThemeCss.cshtml视图 #

@{
    Layout = null;
    Response.ContentType = "text/css";
    var themeService = Context.RequestServices.GetRequiredService<IThemeService>();
    var mainColor = await themeService.GetMainButtonColorAsync();
}

.my-button { background: @mainColor; }
.header-bar { background: @await themeService.GetHeaderColorAsync(); }
/* 其他需要动态替换的样式 */

然后前端直接引用这个视图的URL，比如/ThemeCss。这种方式适合不需要Webpack构建的动态样式片段，如果你是Webpack生成的大型CSS，前两个方案更合适。

内容的提问来源于stack exchange，提问作者Kevin