【问题标题】:Angular: loading scss depending on userAngular:根据用户加载 scss
【发布时间】:2019-02-01 03:09:40
【问题描述】:

我有一组需要为其创建主题的用户。根据用户的帐户关联,我想加载不同的主题。例如,如果 John Doe 登录,我需要加载 greenteam.scss。但是,如果 Doug Smith 登录,他应该会看到 blueteam.scss

这些文件基本上是其他元素使用的颜色和字体设置。 greenteam 可能有$header-bg: green;blueteam 可能有$header-bg: blue;

我最初的想法是有一个这样的结构:/src/scss/client/_client-xxx.scss 表示应用程序中设置的背景颜色、字体颜色等变量。因此,登录后系统被告知登录的人是“greenteam”的一部分,并加载/src/scss/client/_client-greenteam.scss 以将颜色和其他设置一起编译。这样我就可以将新的客户端主题放到目录中,然后繁荣,新的主题!

“团队”的数量将呈指数级增长。我不知道在任何时候我会拥有多少。这就是为什么“只改变身体等级”令人担忧的原因,因为它会变得非常庞大且难以管理。

当用户调用页面/样式时,我也可能没有很好地了解 Angular 如何在网络上构建自身。乍一看,当部署在服务器上时,角度将 scss 编译为标题中的 css,而不是“即时”加载。如果是这种情况,我似乎必须加载所有可能的客户端 css 选项并只显示匹配的内容(主体类路由)。

用户无法直接控制或更改主题,主题将由开发人员手动自定义。

【问题讨论】:

    标签: css angular sass


    【解决方案1】:

    我会建议更改 body 类,但是,如果您真的想在运行时应用 css,您可以尝试:

    1. 将scss编译成css
    2. 根据用户在运行时将其插入到 dom 中

    查看这个主题,它讲述了如何在运行时添加样式,您可以从数据库中获取样式表的文本内容: https://stackoverflow.com/a/524717/10899694

    【讨论】:

      猜你喜欢
      • 2022-09-22
      • 2019-09-29
      • 1970-01-01
      • 1970-01-01
      • 2020-08-10
      • 2013-11-28
      • 1970-01-01
      • 2018-08-26
      • 1970-01-01
      相关资源
      最近更新 更多