Skip to content

Feature: Allow loading .css files as a fallback if no .scss file is found #954

Closed
@vakrilov

Description

@vakrilov

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.

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions