c# - 在 .net core/webpack Web 应用程序中注入(inject) css 样式的最佳实践

标签 c# css webpack .net-core

我正在启动一个新的网络应用程序。后端是c# .net core,前端是一个react应用程序,通过webpack放置在wwwroot中。 Web 应用程序的管理员可以更改一些颜色(按钮颜色、标题颜色等)。这些颜色保存在数据库中,并且应注入(inject)样式表中。生产样式表看起来像

.my-button {
   background: ##main-color##
}

当CSS提供时,我想用数据库中保存的颜色替换##main-color##。

在启动时,我尝试在请求管道上添加中间件。然而,这里永远不会触发对 css 文件的请求。

在之前的应用程序中,我使用了完全相同的设置,只是使用了 .net 框架而不是 .net core。我在请求管道上使用了重写规则和中间件。然后中间件检查是否请求了 css 文件。在这种情况下,我读取内存中的 css 文件并在写入响应之前进行字符串替换。

我正在努力让它在 .net core 中工作,我想知道我应该如何实现类似上面的东西?

最佳答案

我不会在运行时更改它。我会设置一个自动部署过程,在部署之前更新您的 css 文件。您可以在 Azure Devops(或 TFS)中使用此插件:https://marketplace.visualstudio.com/items?itemName=qetza.replacetokens

但是其他 CI-CD 系统也能够完成这些类型的任务,也许需要一些手动脚本。

但是如果你仍然想在启动过程中更新你的css文件。我会更新program.cs

    public class Program
      {
        public static void Main(string[] args)
        {
         var myColors = new Dictionary<string,string>();
         try{
             var connectionString = Environment.GetEnvironmentVariable("CssDBConnection");
             //select values from DB into the dictionary
             myColors = GrabCssColorsFromDatabase(connectionString);
         }catch(Exception e){
            //use default css values in the dictionary
         }
         finally{
            InjectCss(myColors);
           BuildWebHost(args).Run();
         }

        }

这与 Nlogs 非布局目标的解决方法类似: https://github.com/NLog/NLog/wiki/WebService-target---Workaround-for-url-variables

如果您想即时更新它(没有新的部署)。 提供一个 IActionResultEndpoint,它返回注入(inject)的 CssFile。

端点可以是/Home/Styles 再说一遍:

  1. 从数据库获取变量或后备值
  2. 获取您的“cssTemplate”
  3. 注入(inject)变量
  4. 返回生成的 css 文件(作为 FileResult)
  5. 您的 UI 应从此端点获取样式,而不是文件

关于c# - 在 .net core/webpack Web 应用程序中注入(inject) css 样式的最佳实践,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57722486/

相关文章:

reactjs - React Dev Tools 不加载组件和事件不触发

c# - 当 DataSource 值更改时,WinForms ComboBox 中的项目不更新

c# - 使用正则表达式解析签名,具有 "fun"和数组返回值

c# - 为什么要使用 getter 和 setter 方法来设置类属性?

c# - LINQ 获取最接近的值?

css - CSS3 Border Radius属性在localhost中不起作用?

html - 边框 60 度而不是 45 度,背景颜色在 div 之外

html - HTML 中的自定义下拉列表

javascript - html-loader 的用途是什么以及它在 Webpack 中是如何工作的

webpack - 在 Webpack 中配置多个页面的正确方法是什么?