Including shared styling within NativeScript app using angular.json stylePreprocessor

Question

I'm attempting to use the Angular 6's stylePreprocessorOptions so I can simply @import 'app' to import branding/other shared stylings into a component.

My nativescript project exists within a NxWorkspace setup, which itself contains an angular.json.

The documentation from @nativescript/schematics says to generate a new angular.json file within the NativeScript projects root, which I have done but also I have placed a clone of the definition within my NxWorkspace root's angular.json file as it's unclear to me which is used.

The angular.json file's content can be found here: https://hastebin.com/zajiviqoyi.json

When attempting to use @import "app" it tells me it cannot find the app relative to the file where I have done the import line. In my other app setups, but NativeScript in this instance appears to be ignoring my configuration.

Answer 1

After a while, I was able to solve this myself.

I had to edit the webpack.config.js, specifically the sass-loader.

If you change the sass-loader part of the .scss rules, you can add includePaths to achieve a fallback file resolution for sass.

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

this means I can now @import 'app' and NativeScript will find the file outside of it's own directory.

As a warning, this doesn't include the file-extension system NativeScript boasts, so you cannot append .tns for a NativeScript specific file.

node-sass (sass-loader) does support a loader function of which you can use to emulate this functionality if you require.