NativeScript

Question

我正在使用 NativeScript 6.4.1 和 Angular 8 构建一个应用程序。我想使用 SASS 因为我喜欢 SASS 附带的功能，例如变量名。

我的图形设计师提供了多种颜色，我将在不同页面上使用这些颜色，因此十六进制颜色的 SASS 变量会很好。

我已经安装了

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

app.scss

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

@import 'variables';

我遇到的问题是我的 SASS 变量在我的组件 scss 文件中似乎不可用。

home.component.scss

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

variables.scss

$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

如何使用任何 scss 文件夹或文件中的变量？

我不想到处导入变量文件。

Answer 1

只需将 variable.scss 文件导入 component.scss 文件

或者，你也可以像

这样声明你的变量

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

并像这样使用它，

color: var(--variable1)

在你的component.scss

里面

更新

我想我解决了你的问题，看看这个 https://play.nativescript.org/?template=play-ng&id=aDZ7lZ&v=2

问题是，对于本例中的 home 组件，您使用的是 css 文件，因此它无法识别 scss 语法，我已在发布的游乐场

中修复了该问题

更新只需使用，

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

这使用所有全局样式而无需导入 .scss 文件

很高兴为您提供帮助

Answer 2

没有替代解决方案，您必须在所有组件特定的 scss 文件中包含变量 scss 文件，否则编译器将不知道您在寻找什么。

如果您非常需要这个，我建议您完成 webpack docs，您可能会找到默认注入变量的解决方法。

NativeScript - 如何在应用程序的整个 scss 中使用 SASS 变量？

NativeScript - how to use SASS variables all over the scss in the app?

css

sass

angular