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

【问题标题】：Including shared styling within NativeScript app using angular.json stylePreprocessor使用 angular.json stylePreprocessor 在 NativeScript 应用程序中包含共享样式
【发布时间】：2019-01-24 09:38:06
【问题描述】：

我正在尝试使用 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 似乎忽略了我的配置。

【问题讨论】：

标签： typescript nativescript angular6 nativescript-angular angular-schematics

【解决方案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 函数，如果需要，您可以使用该函数来模拟此功能。

【讨论】：