Angular 7 SCSS не сохраняет пользовательские свойства CSS

Question

Я пытаюсь использовать пользовательские свойства CSS в своем приложении Angular 7, но сталкиваюсь с проблемами, когда при переходе к css избавляется от свойства, установленного для переменной CSS.

SCSS

:root {
  --my-test-var: red;
}

.testclass123 {
  height: 150px;
  background: var(--my-test-var);
}

Строится до:

:root {
  --my-test-var: red;
}

.testclass123 {
  height: 150px;
}

Если я использую запасные варианты, такие как var(--my-test-var, purple);, тогда .testclass123 также будет иметь свойство background: purple;

Моя версия Angular7.2.7 и угловой материал 7.3.7

Answer 1

Если вы используете SCSS в качестве глобального стиля, вы можете так определить цвет. Это лучший подход.

$product: red;

И тогда только вы звоните, когда вам нужно, как это.

background-color: $product;