时间戳

首页 > 解决方案 > 如何在 NativeScript-Vue 中使用外部 scss 文件

vue.js - 如何在 NativeScript-Vue 中使用外部 scss 文件

问题描述

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

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

我_variables.sccs在generalStyles.sccs.

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

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

@import "样式/一般样式";

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",

标签： vue.jssassnativescript-vue

解决方案

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

推荐阅读