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

Question

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

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

@nativescript/schematics的文档说要在NativeScript项目根目录中生成一个新的angular.json文件，我已经完成了，但是我还在NxWorkspace根目录的{{1}中放置了一个定义的副本。 }文件，因为不清楚使用哪个文件。

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

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

Answer 1

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

我必须编辑webpack.config.js，特别是sass-loader。

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

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

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

作为警告，它不包括NativeScript拥有的文件扩展名系统，因此您不能为NativeScript特定文件附加.tns。

node-sass（sass-loader）确实支持loader功能，您可以根据需要使用其功能来模拟此功能。