如何在 nativescript-vue 中使用特定于平台的 CSS？

【问题标题】：How to use platform-specific SCSS in nativescipt-vue?如何在 nativescript-vue 中使用特定于平台的 CSS？
【发布时间】：2020-07-15 15:22:56
【问题描述】：

我有一个 nativesript-vue 应用程序，使用 lang="scss" 作为样式。

如何使用特定于平台的样式？

我有 app.scss 文件，我导入特定于平台的 scss 文件。

app.scss

@import "~@/app.android.scss";
@import "~@/app.ios.scss";

首页.vue

<style lang="scss" scoped>
@import "@/app.scss";
.class {
    color:red
}
</style>

我尝试了所有方法，但都失败了。

【问题讨论】：

【解决方案1】：

当您导入 css 文件时，导入文件中的任何样式定义都会覆盖以前导入文件中同名的样式定义。

以下是我为 nativescript-vue 组织 .scss 文件的方式：

@/app.android.scss

@import "./styles/app-common";

/* Android-specific styles */

@/app.ios.scss

@import "./styles/app-common";

/* iOS-specific styles */

@/styles/_app-common.scss

@import "./app-variables";

/* Shared styles, including variables defined in app-variables */

@/styles/_app-variables.scss

/* Variable definitions */

Webpack 将所有 scss 编译成适当的 .css 文件，这些文件将被加载到您的应用中，包括特定于平台的样式。

【讨论】：