如何在 nativescipt-vue 中使用平台特定的 SCSS？

Question

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

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

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

app.scss

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

Home.vue

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

它不呈现特定于平台的 scss 文件。但相反，它只适用于最后一次导入。

---

所有的方法都试过了，都失败了

https://dev.to/progress/platform-specific-development-with-nativescript-dd1#customizing-styles

https://docs.nativescript.org/ui/styling#platform-specific-css

Answer 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 文件，这些文件将加载到您的应用程序中，包括 platform-specific 样式。