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

Posted 2023-03-06

【中文标题】NativeScript - 如何在应用程序的整个 scss 中使用 SASS 变量？

【英文标题】：NativeScript - how to use SASS variables all over the scss in the app?

【发布时间】：2020-07-27 03:31:55

【问题描述】：

我正在使用 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

变量.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 文件夹或文件中的变量？

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

【问题讨论】：

是否给出未定义的错误？

我没有看到任何问题，它可以正常工作并以深蓝色显示背景。但仅供参考，您不必添加已导入 styleUrls 的 SCSS 文件。此外，变量文件通常带有下划线 (_) 后缀，因此不会实际创建。有关更多信息，请参阅 SCSS 文档。

当然可以，但是您必须将变量文件导入到您在new-file.scss 中所做的作用域中。但您不必将其添加到 styleUrls。

@Manoj 我再次更新了操场，更清楚地说明了问题。

没有替代解决方案，您必须在所有组件特定的 scss 文件中包含变量 scss 文件，否则编译器将不知道您在寻找什么。如果您非常需要这个，我建议您阅读 webpack 文档，您可能会找到默认注入变量的解决方法。

【参考方案1】：

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

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

【参考方案2】：

只需在您的 component.scss 文件中导入该 variable.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 语法，我已经在发布的 Playground 中修复了这个问题?

更新 就用吧，

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

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

很高兴为您提供帮助?

【讨论】：

我尝试了 :root 的东西，但它没有用。完全导入它有点糟糕，但它会起作用。

@user1261710 您的样式文件是 .css 还是 .scss？你想在哪里使用这个导入的变量。

.scss 是文件类型。

为什么你的问题是 app.css？

@user1261710 我想我已经解决了这个问题，如果它解决了你的问题，你能否点赞并接受它作为答案（小忙）?也可以查看这个 NS 游乐场以供参考play.nativescript.org/?template=play-ng&id=cBPYCs&v=3