Могу ли я экспортировать переменные Sass и импортировать их в переменные Angular Typescript?

Question

Я долго смотрел на это. У меня есть мое заявление прямо сейчас, как оно есть. У нас есть переменные, определенные в scss для окраски. Я пытаюсь импортировать переменные в Typescript, чтобы я мог отправить их на серверы.

У меня есть куча строк шрифтов и цветов в моем компоненте Angular, но я решил поместить их в файл scss, так как он используется для дизайна. Проблема в том, что я не знаю, как получить цвета.

Я видел, как некоторые люди делают что-то подобное в Javascript, но в настоящее время я не могу воспроизвести это в Typescript.

В идеале, я хочу сделать:

SCSS:

:export { myVariable:#ffffff; }

NGTypescript:

import {styles} from "./styles.scss";

и затем сделайте что-то похожее на:

onPostRequest(){ let color = styles.myVariable; ... }

Когда я доберусь до строки импорта выше, будет указано: Не удается найти модуль './icon-picker.component.scss'.ts(2307)

Я видел в похожих примерах, например, React, который работает аналогично, но у меня возникают проблемы с переносом этой концепции на Angular. https://github.com/css-modules/css-modules/issues/86 показывает концепции, которые я заметил. Вот также пошаговое руководство по Javascript, в котором, похоже, также есть проблемы: https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript

Answer 1

Вы пытались определить цвета как переменные в src / styles.scss, связав их с помощью селекторов CSS и ссылаясь на эти селекторы в html-файле компонента?

Например:

$primary-color: #333;
$secondary-color: #777;
.primary-color {
   color: $primary-color;
}
.secondary-color {
   color: $secondary-color;
}

А затем в ваш HTML-компонент:

<p class="primary-color">Text with primary color</p>
<p class="secondary-color">Text with secondary color</p>

Для вашего интереса вы также можете изменить компонент css на scss, переименовав * .css и обновив ссылку StyleUrls в файле ts компонента.