Для получения названий SCSS переменных в JavaScript (в контексте Angular 2+ приложения), вы должны использовать Sass-препроцессор, чтобы отобразить переменные в CSS, которые затем можно использовать в JavaScript.
Шаги, которые вы должны выполнить, приведены ниже:
- Установите необходимые пакеты. Для этого вам понадобится установить Sass-препроцессор и его соответствующий пакет npm:
npm install node-sass --save-dev
- Создайте файл стилей SCSS, например styles.scss, и определите в нем свои переменные:
$primary-color: #007bff; $secondary-color: #6c757d;
- В файле компонента Angular, в котором вы хотите получить доступ к переменным, импортируйте стили SCSS:
import './styles.scss';
- Создайте глобальный объект, который будет содержать значения переменных стилей. Это можно сделать, добавив следующий код в файле, импортированном в шаге 3:
const styles = getComputedStyle(document.documentElement);
const primaryColor = styles.getPropertyValue('--primary-color');
const secondaryColor = styles.getPropertyValue('--secondary-color');
- Теперь вы можете использовать значения переменных стилей в вашем компоненте JavaScript:
console.log(primaryColor); // Выведет '#007bff' console.log(secondaryColor); // Выведет '#6c757d'
Примечание: Нельзя получить названия SCSS переменных в JavaScript напрямую, так как они существуют только на этапе компиляции и не доступны на этапе выполнения. Вместо этого, вы получаете значения переменных стилей, которые могут быть определены в SCSS файлах с использованием Sass препроцессора.
Надеюсь, эта информация поможет вам в получении значений SCSS переменных в JavaScript в контексте Angular 2+ приложения.