在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的背景一样，以前我要做的是在母版页加载中，从DB中获取值并将它们写入.less文件，然后让Java脚本库来处理.在那里很简单.
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 .
谢谢.
推荐答案
如其他答案所述，无法在客户端上设置SASS变量并对其进行处理，因为SASS在构建时和应用程序转换为纯CSS正在运行或在APP_INITIALIZER浏览器中只能处理CSS.
As other answers explained, it is not possible to set SASS variables and process that on the client, as SASS is converted to plain CSS at build time and when app is running or in APP_INITIALIZER browser can process only CSS.
我看到了两种选择来实现您想要的.
I see two options to achieve what you want.
通常，您会为应用程序设置一些基本的CSS，然后需要根据管理员设置加载其他CSS.从css的角度来看，需要考虑的是，其他css中的所有css特异性都应大于基本css，因为否则它将不会覆盖基本css.这需要基本的CSS知识，所以我将不赘述.
Generally, you would have some base css for the app, and then you need to load the additional css based on admin settings. What needs to be considered from css point of view is that all css specificity in additional css should be greater than base css, because otherwise it won't override the base. That requires basic css knowledge so I won't go into details.
根据服务器请求生成其他CSS.从服务器URL启动应用程序时加载它.管理员更改任何设置时，可以通过js重新加载.
Generate your additional css on server request. Load it when app is started from server URL. Reload it by js when admin change any settings.
- 在地址
/additional.css定义后端终结点(或者可能与/api/theme/custom-css相似)，它将从数据库中生成CSS.例如，您在db中有background=red，则端点应返回
- Define backend endpoint at address
/additional.css(or it could be similar to/api/theme/custom-css) which will generate css out of database. For example you havebackground=redin db, then the endpoint should return
body {background-color: red;}
- 在
index.html的<head>中添加<link id="additionalCss" rel="stylesheet" type="text/css" href="additional.css" />.这就足以使其正常工作. - 要重新加载，您可以使用不同的方法，但是我相信这应该可行
- Add
<link id="additionalCss" rel="stylesheet" type="text/css" href="additional.css" />in<head>ofindex.html. And that will be enough to make it work. - To reload you can use different methods, but I believe this should work
document.getElementById('additionalCss').href = document.getElementById('additionalCss').href;
这将向服务器发出新请求，服务器将执行DB-> css并返回更新的css，该更新的css将应用于浏览器.
This will make new request to the server, server will execute DB -> css and return the updated css, which will be applied to the browser.
如果您想保持冷静(或者需要支持大型复杂主题)，可以使用scss.后端应从数据库之外生成scss变量定义，然后应使用某些服务器端应用程序来编译scss-> css，然后将编译后的css提供回客户端.但是，如果额外的CSS很简单，这将是多余的.
And if you want to be cool (or need to support big and complex themes) scss can be used. Backend should generate scss variable definitions out of database, then should use some server-side app to compile scss -> css, and then serve compiled css back to the client. But this will be overkill if additional css is simple enough.
此方法的一个重要考虑因素是浏览器缓存，因为extra.css后面的内容是动态的，但是浏览器可以缓存它，而不是调用后端并提供过时的版本.
One important consideration of this method is browser caching, because content behind additional.css is dynamic, but browser may cache it, not call the backend and serve outdated version.
如果您不希望或无法与后端打交道.通过JSON中的某个API端点从数据库加载设置，然后在客户端上生成CSS代码并应用它.
If you don't want or can't mess with the backend. Load settings from DB by some API endpoint in json, then generate css code on the client and apply it.
- 使用HttpClient获取设置JSON并从中生成CSS作为字符串.例如服务器返回
{
"background": "red"
}
然后将其转换为字符串
cssCode = 'body {background-color: red}';
- 使用
let additionalCssStyle = document.getElementById('additionalCss');
if (! additionalCssStyle) {
additionalCssStyle = document.createElement("style");
additionalCssStyle.id = 'additionalCss';
document.head.appendChild(additionalCssStyle);
}
additionalCssStyle.innerText = cssCode;
- 要重新加载-将更改保存到后端，然后重复1.和2.
这篇关于在Angular 7中设置Sass变量值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
