使用 angular.json stylePreprocessor 在 NativeScript 应用程序中包含共享样式

Question

我正在尝试使用 Angular 6 的 stylePreprocessorOptions，因此我可以简单地 @import 'app' 将 branding/other 共享样式导入组件。

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

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

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

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

Answer 1

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

我不得不编辑 webpack.config.js，特别是 sass-loader。

如果您更改 .scss 规则的 sass-loader 部分，您可以添加 includePaths 以实现 sass.

的后备文件解析

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

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

作为警告，这不包括 NativeScript 引以为傲的文件扩展系统，因此您不能为 NativeScript 特定文件附加 .tns。

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

使用 angular.json stylePreprocessor 在 NativeScript 应用程序中包含共享样式

Including shared styling within NativeScript app using angular.json stylePreprocessor

typescript

nativescript

nativescript-angular

angular-schematics

angular6