-
-
Notifications
You must be signed in to change notification settings - Fork 239
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.