Sass in NativeScript with angular for Component specific .scss

Question

I am trying to use nativescript-dev-sass plugin and it successfully creates ".css" files from within the app folder only (NOT Subfolders) in my project (app.scss -> app.css). But I want to use component specific css file. That is, inside "app" folder I have component folder "login" and it contains login.scss. (app -> login -> login.scss). This login.scss is not creating login.css.

Is it not possible to use it like this ? Should I add all my css into "app" folder and set the path to css right in all the components that I create ? Please help.

Answer 1

It is possible to do this.

Follow the Nativescript SASS usage in the official docs - https://docs.nativescript.org/ui/theme#sass-usage

Then when you create a new component in a separate folder you will have the following.

Structure

login/
    login.component.ts
    login.component.html
    login.component.scss
    login.component.css

component.ts

Your component.ts should look like the following:

@Component({
    selector: 'login',
    moduleId: module.id,
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
})

Notice the styleURLs references the .css file here. Even though you will write all your css inside the .scss file not the .css file. When you build your project using tns run android for example, the content inside your .scss will get compiled down and the contents automatically added to your .css file without you having to do anything, assuming this file exists.

Additionally, let say you want to create a app/theme.scss file which consists of common styling and variables. You can import this theme.scss within your login.scss giving you access to these styles in your specific component

component.scss

@import '../../theme';