Description
The goal is be able to use SASS for styling components in development(without webpack and AOT) and for production(with webpack/AOT) with the following syntax:
@Component({
//...
styleUrls: ["./my-component.scss"]
})
export class MyComponent { ... }
With Webpack/AOT
Assuming you are using the nativescript-dev-webpack
{N} plugin and and the @ngtools/webpack
webpack plugin.
The .scss
files will be compiled and bundled by the webpack build - so no changes are required as long as you have the webpack configured to handle .scss
files
Without Webpack/AOT
The .scss
files will be compiled by the nativescript-dev-sass
plugin in a before-prepare
. This will generate my-component.css
file. However, we need to be able to load the compiled .css
file runtime, when the my-component.scss
is requested by angular runtime compiler.
Note: The nativescript-dev-sass
plugin should clear all .scss
so that they are not availabe in the app.
Solution
Make changes in the FileSystemResourceLoader
so that it fallbacks to loading .css
file, if a .scss
file was requested and not found.