如何在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文件，这些文件将被加载到您的应用中，包括特定于平台的样式。