在 Angular 7 中设置 sass 变量值 [英] Set sass variable value in Angular 7
问题描述
过去几周我一直在使用 angular，现在我需要动态设置公共站点的样式.站点管理员在数据库中设置了各种颜色代码以及管理员的徽标图像.这些将在公开网站打开时反映出来.
I have been working with angular for the last few weeks, and now I have a requirement to dynamically style a public site. The site admin set various color codes as well as a logo image from admin in a database. These will be reflected when the Public Site opens.
因为我来自 asp.net 背景，以前我要做的是在母版页加载时，从数据库中获取值并将它们写入一个 .less 文件，并让 java-script 库来处理它.那里很简单.
As I am from an asp.net background, previously what I would do is on master page load, take values from the DB and write them into a .less file, and let java-script library take care of it. It's simple there.
但就我目前的情况而言，我使用的是 sass，但我无法找到将变量写入 .scss 文件的方法.
But for my current situation, I am using sass, and I am not able find a way to write variables into a .scss file.
我刚刚从 这里 学到了一个新东西 APP_INITIALIZER，但是最终这篇文章没有展示如何在 .scss 文件中写入.
I just learn a new thing APP_INITIALIZER from here ,but ultimately this post not showing how to write in the .scss file.
我实际上是在用我的 asp.net 知识思考这个问题，但可能是我错了，或者还有另一种实现方式.
I am actually thinking this with my asp.net knowledge,but may be I am wrong ,or there are another way of implementation.
我想要一个简单的解决方案，我们在 asp.net 中所做的我想以同样的方式实现.
I want a simple solution ,what we do in asp.net I want to achieve this in same way.
首次加载应用程序时，通过 api 从数据库中获取变量值.
Take variable value from DB via api,when application loading for first time.
在 SASS 变量文件中写入值.
Write values in SASS variable file .
之后，SASS 会处理这个问题，我们得到预期的结果.
After that SASS will take care of this and we get result as expected .
请给出一些建议或例子，以开始.
Please give some suggestion or example ,to start with .
谢谢.
推荐答案
首先，在 ASP .NET 中，让一个 db 保存 CSS 规则和其他静态资产可能还不错.这是因为它是一个服务器端渲染框架，所以有点意思.
First of all, in ASP .NET, it might be not bad to have a db hold CSS rules and other static assets. This is because it is a Server Side Rendering framework, so it kinda makes sense.
另一方面，在 Angular 中，它是客户端(Angular Universal 除外，但您仍然必须期望以类似的方法工作).即使使用翻译(i18n 或自定义)，在 Angular 世界中，它也很可能存储在前端(i18n .json 文件)而不是从后端(db 左右).
On the other hand, in Angular, it is client side (with the exception of Angular Universal, but you'll still have to expect working in similar approaches). Even with translations (i18n or custom), in Angular world, it is most likely stored on the front end (i18n .json files) and not from the back (db or so).
因此，您必须以您喜欢的某种方式存储主题，并使用 Angular 在它们之间动态切换.您当然可以存储样式/主题的键/变量，但您的实际 CSS 代码仍存储在 .css 文件中.
So you'll have to go and have your theme's stored in a certain manner you prefer and make your way to switching between them dynamically with Angular. You can of course store the keys/variables for the styles/themes but your actual CSS code is still stored on .css files.
尝试从 动态设置应用主题 (Angular) 时使用的 CSS 变量.这只是一种方法，有很多方法可以做到这一点，您可能需要寻找您的个人喜好.
Try to see this simple example from CSS vars in use while dynamically setting app theme (Angular). This is only just one way and there are lots of ways to do this and you might have to look for your personal preference.
更新:
我上面的回答可能有错误的含义，但我会保持原样，只分享我与该主题相关的一个经验.
There might be erroneous implications of my answer above, but I'll leave it as is and just share one experience I had that is related to this topic.
我开发了一个 web 应用程序，用户可以通过设置自定义他的主题，同样，CSS 规则不存储在 DB 中，但要在 sass 变量上设置的颜色值是.有一个特殊的脚本，用于编译 CSS 脚本(按需返回，这使得它有点慢，但启动画面只是节省了你的一天，而不是 AOT 编译)以及自定义值，我不知道如何它完成了.与翻译相同，我最近还参与了一个翻译来自 db 的项目，但是每个发布/部署都有一个脚本运行，该脚本生成和更新 assets/i18n 文件夹中的 .json 文件.
I have worked on a webapp where the user can customize his theme via settings, likewise, The CSS rules aren't stored on DB, but the color values to be set on sass variables are. There was a special script where CSS scripts will be compiled (was returned on demand which made it a bit slow but a splash screen just saves your day, not AOT compiled) along with the custom values, which I don't have any idea how it was done. The same with translations, I also recently worked on a project where translations are from db, but there's a script to run for every release/deployment that generates and updates the .json files in the assets/i18n folder.
这篇关于在 Angular 7 中设置 sass 变量值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
