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:

• $ npm start -- --scss
• $ npm run build.[dev|e2e|prod|test] -- --scss
• $ npm run serve.[dev|e2e|prod|test] -- --scss

For a permanent enablement, set the ENABLE_SCSS config value to true in either seed.config.ts or project.config.ts.

SCSS folder

On 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 (ex: variables, mixins, abstract classes, etc...). I recommand you to adopt this king of structure :

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 cssdirectory and put inside the scss files that you want to compile. I recommand you to create a single new file named main.scss which will just import the necessaries scss files to compile. It's the entry point and fasten compilation.

@import '../scss/main';

You can change this directory's name with the variable SCSS_SRC = `${this.APP_SRC}/scss`; into 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
}