Question

我有一个使用Angular的Web应用程序，我的目标是根据代码中的某些环境变量使用sass生成样式。

例如： style.scss

import "myVariables.scss"
import "{{ScssClient}}" // variable overload

/// my style ...///

TS文件中的某个位置：

let ScssClient = "www.downloadfile.com/myscssfile";

我知道SASS不支持变量插值。

有什么解决方法可以实现我的目标？

Answer 1

如果您的应用程序要求支持，则可以使用CSS变量。

选中https://medium.freecodecamp.org/everything-you-need-to-know-about-css-variables-c74d922ea855

特别是在服务中，您可以通过以下方式覆盖它们：

function handleThemeUpdate(e) {
  switch(e.target.value) {
    case 'dark': 
      root.style.setProperty('--bg', 'black')
      root.style.setProperty('--bg-text', 'white')
      break
    case 'calm': 
       root.style.setProperty('--bg', '#B3E5FC')
       root.style.setProperty('--bg-text', '#37474F')
      break
    case 'light':
      root.style.setProperty('--bg', 'white')
      root.style.setProperty('--bg-text', 'black')
      break
  }
}

回答与您的问题并不完全相关，但这可能是提示：）

使用Angular导入动态样式

1 个答案: