Импорт динамических стилей с использованием Angular

Question

У меня есть веб-приложение, использующее Angular, и моей целью было бы создать стиль с использованием 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
  }
}

Ответ, это не совсем связано с вашим вопросом, но это возможный намек:)