NativeScript - как использовать переменные SASS во всем s css в приложении?

Question

Я создаю приложение с NativeScript 6.4.1 и Angular 8. Я хочу использовать с ним SASS , потому что мне нравятся функции, которые идут с SASS, такие как имена переменных.

Мой дизайнер графиков c предоставил ряд цветов, которые я буду использовать на всех страницах приложения, поэтому переменные SASS для шестнадцатеричных цветов будут хорошими.

Я установил

"node-sass": "4.12.0",
"sass": "^1.23.7",
"sass-loader": "^8.0.0",

app.s css

@import '~@nativescript/theme/css/core.css';

@import 'variables';

Проблема, с которой я столкнулся, заключается в том, что мои переменные SASS, по-видимому, недоступны в файлах моего компонента css.

home.component.s css

.home-panel{
vertical-align: center; 
font-size: 20;
margin: 15;
background-color: $navy_blue; //this does not exist
}

variables.s css

$navy_blue: #105195;
$vivid_cerulean: #28abe2;
$white: #ffffff;
$dark_navy_blue: #063260;
$light_grey: #eeeeee;
$error_red: #eb2026;

Здесь есть игровая площадка, но это не моя настоящая установка : https://play.nativescript.org/?template=play-ng&id=aDZ7lZ

Как использовать переменные в любой папке или файле s css?

Я бы предпочел не импортировать файл переменных по всему место.

Answer 1

Альтернативного решения не существует, вы должны включить переменную s css file во все компоненты, специфицируемые c s css file, без этого компилятор не будет знать, что вы ищете.

Если вам это крайне необходимо, я бы посоветовал вам от go до документов веб-пакета , вы можете найти обходной путь для введения ваших переменных по умолчанию.

Answer 2

Просто импортируйте эту переменную.s css файл в ваш компонент.s css file

Или вы также можете объявить свои переменные как

:root {
    --variable1: #fff;
    --variable2: #ddd;
}

и использовать его как ,

color: var(--variable1)

внутри вашего компонента.s css

ОБНОВЛЕНИЕ

Я думаю, я решил вашу проблему, проверьте это https://play.nativescript.org/?template=play-ng&id=aDZ7lZ&v=2

Проблема заключалась в том, что для домашнего компонента в этом примере вы использовали файл css, поэтому он не смог распознать синтаксис s css, я исправил это в размещенной игровой площадке ?

ОБНОВЛЕНИЕ Просто используйте,

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html",
    styleUrls: ["./home.component.scss"],
    encapsulation: ViewEncapsulation.None
})
export class HomeComponent implements OnInit {
...
}

При этом используются все глобальные стили без необходимости импортировать .s css файлы

Рад помочь вам ?