Working with SASS

Working with SASS

This guide describes how to enable and work with SASS with the angular-seed.

How to enable SASS support

1. Rename all of your *.css files to *.scss.

• If you are using MacOS, install rename with homebrew (brew install rename)
• cd src
• find . -name "*.css" -exec rename 's/\.css$/.scss/' '{}' \;. All css files in the current folder will be renamed to scss recursively
• find . -name "*.css" -exec rm '{}' \;. All .css files will be deleted

2. Set the ENABLE_SCSS config value to true during a build or serve task:

• $ ENABLE_SCSS=1 npm start
• $ ENABLE_SCSS=true npm run build.[dev|e2e|prod|test]
• $ ENABLE_SCSS=1 npm run serve.[dev|e2e|prod|test]

※ Note: The --scss flag has been replaced by the ENABLE_SCSS environment variable for reasons described in commit 5d7e5db. For backwards compatibility, the --scss flag has not been removed; however, angular-seed users are encouraged to do either of the following in order to enable SASS support:

• Prefix your npm run-script commands with ENABLE_SCSS=1 or ENABLE_SCSS=true as in the above examples.
• For a permanent enablement, set ENABLE_SCSS=true in either seed.config.ts or project.config.ts (preferred). To reduce merge conflicts when merging the most recent angular-seed commits with your local project, use project.config.ts.

SCSS folder

In the root of your project (ex: client/), create a new folder named scss. This folder will contain all of your scss scripts that you don't want to compile unless imported (ex: variables, mixins, abstract classes, etc...). I recommend you adopt a structure similar to this one :

scss
├── colors.scss      <- contains all of your colors variables
├── fonts.scss       <- contains all of your fonts variables and imports
├── mixins.scss      <- contains all of your mixins
├── variables.scss   <- import colors.scss and fonts.scss + contains all others variables
└── main.scss        <- import variables.scss and contains all the css

Keep the css directory and place the scss files that you want to compile inside. I recommend you create a single new file named main.scss which will just import the necessary scss files to compile. This will act as an entry point and will decrease compilation time.

@import '../scss/main';

You can change this directory's name with the variable SCSS_SRC = `${this.APP_SRC}/scss`; in project.config.ts

App folder

Your app folder must contain all of your angular components. If a component require a style, simply create a scss file with its name (ex: home.component.scss).

Then, you could import your variables and write your css:

@import '../../../scss/variables';

:host {
  // put your code here
  color: $color-red; // ex: imported from variables.scss
}

※ Important note : avoid importing anything else than variables, mixins or abtract classes from your components unless you know what's your doing ! Moreover, avoid too to import files which are not in the scss/ folder to improve performances. Without following this advices, you could create duplicate code (less optimization), or be confused why some files are not re-compiled in some case.

Reference a SASS stylesheet from a component

To reference stylesheet home.component.scss from component home.component.ts, add home.component.css (※ Notice we use 'css,' not 'scss') to home.component.ts's styleUrls array.

Example:

home
├── home.component.scss
├── home.component.html
└── home.component.ts

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