首页 > 解决方案 > 使用 angular.json stylePreprocessor 在 NativeScript 应用程序中包含共享样式

问题描述

我正在尝试使用 Angular 6 stylePreprocessorOptions,因此我可以简单@import 'app'地将品牌/其他共享样式导入组件。

我的 nativescript 项目存在于 NxWorkspace 设置中,该设置本身包含一个angular.json.

来自的文档@nativescript/schematics说要在 NativeScript 项目根目录中生成一个新angular.json文件,我已经这样做了,但我还在我的 NxWorkspace 根目录angular.json文件中放置了一个定义的克隆,因为我不清楚使用的是哪个。

angular.json文件的内容可以在这里找到:https ://hastebin.com/zajiviqoyi.json

尝试使用@import "app"它时告诉我它找不到与app我已完成导入行的文件的相对文件。在我的其他应用程序设置中,但本例中的 NativeScript 似乎忽略了我的配置。

标签: typescriptnativescriptangular6nativescript-angularangular-schematics

解决方案


过了一段时间,我自己解决了这个问题。

我不得不编辑webpack.config.js.sass-loader

如果改变sass-loader部分.scss规则,可以添加includePaths实现sass的后备文件解析。

{
    loader: "sass-loader",
    options: {
        includePaths: ["assets/sass"]
    }
}

这意味着我现在可以@import 'app'并且 NativeScript 将在它自己的目录之外找到该文件。

作为警告,这不包括 NativeScript 拥有的文件扩展系统,因此您不能附加.tnsNativeScript 特定文件。

node-sass(sass-loader) 确实支持一个loader功能,如果需要,您可以使用该功能来模拟此功能。


推荐阅读