如何在 NativeScript-Vue 中使用外部 scss 文件答案

【问题标题】：How to use external scss files in NativeScript-Vue如何在 NativeScript-Vue 中使用外部 scss 文件
【发布时间】：2020-05-05 02:48:17
【问题描述】：

我有 2 个外部要在我的 Nativescript-Vue 文件中使用。

它们位于以下目录/app/styles/_variables.sccs 和/app/styles/generalStyles.scss。

我在generalStyles.sccs 中导入_variables.sccs。

但是当我想在我的 Vue 文件中导入 generalStyles.sccs 时，它给了我以下错误：

SassError：找不到或无法读取要导入的文件：样式/一般样式。在 app/components/Select/StationSelect.vue 的第 277 行

@import "styles/generalStyles";

StationSelect.vue 长这样

<style lang="scss" scoped>

    @import "styles/generalStyles";

    .routeDetailsChoice,
    .timeDetails{
        Label,
        TextField{

            .ns-dark &{
                color: $white;
            }
        }
    }
</style>

我还有以下包：

"nativescript-vue": "2.4.0",
"node-sass": "^4.13.0",
"sass-loader": "^8.0.1",
"style-loader": "^1.1.3",

【问题讨论】：

请查看answer
@BoussadjraBrahim 抱歉，我试过了，但也没有用。它给出了他找不到样式的错误。还有其他问题，我也无法使用 _variables.scss 中的变量。

标签： vue.js sass nativescript-vue

【解决方案1】：

Webpack 配置了一些指向项目根文件夹的别名。尝试@import "app/styles/generalStyles"; 或@import "~/styles/generalStyles"; 或从相对路径导入。

【讨论】：