Add Sass support

In this guide, we add sass support to the stack.

1. Install the npm dependencies.

npm i --save-dev gulp-sass gulp-sourcemaps gulp-progeny

2. Copy /tools/tasks/seed/build.html_css.ts to /tools/tasks/project/build.html_scss.ts. Open it up and edit it like this:

...
// basically you can overwrite everything from processComponentCss with the contents below
function processComponentScss() {
 return gulp.src([
     join(APP_SRC, '**', '*.scss'),
     '!' + join(APP_SRC, 'assets', '**', '*.scss')
   ])
   .pipe(isProd ? plugins.cached('process-component-scss') : plugins.util.noop())
   .pipe(isProd ? plugins.progeny() : plugins.util.noop())
   .pipe(plugins.sourcemaps.init())
   .pipe(plugins.sass({includePaths: ['./node_modules/']}).on('error', plugins.sass.logError))
   .pipe(plugins.postcss(processors))
   .pipe(plugins.sourcemaps.write(isProd ? '.' : ''))
   .pipe(gulp.dest(isProd ? TMP_DIR: APP_DEST));
}

function processExternalScss() {
 return gulp.src(getExternalScss().map(r => r.src))
   .pipe(isProd ? plugins.cached('process-external-scss') : plugins.util.noop())
   .pipe(isProd ? plugins.progeny() : plugins.util.noop())
   .pipe(plugins.sourcemaps.init())
   .pipe(plugins.sass({includePaths: ['./node_modules/']}).on('error', plugins.sass.logError))
   .pipe(plugins.postcss(processors))
   .pipe(plugins.sourcemaps.write(isProd ? '.' : ''))
   .pipe(gulp.dest(CSS_DEST));
}

function getExternalScss() {
 return APP_ASSETS.filter(d => /\.scss$/.test(d.src));
}


export = () => merge(processComponentScss(), prepareTemplates(), processExternalScss());

3. Open tools/config/project.config.ts and add this: this.CSS_PROD_BUNDLE = 'main.css'; anywhere in the constructor.
4. Copy tools/tasks/seed/build.index.dev.ts to tools/tasks/project/build.index.dev.ts and edit it like this:

...
function mapPath(dep: any) {
 let envPath = dep.src;

 if (envPath.startsWith(APP_SRC) && !envPath.endsWith('.scss')) {
   envPath = join(APP_DEST, dep.src.replace(APP_SRC, ''));
 }

 if (envPath.startsWith(APP_SRC) && envPath.endsWith('.scss')) {
   envPath = envPath
     .replace(ASSETS_SRC, CSS_DEST)
     .replace('.scss', '.css');
 }

 return envPath;
}
...

5. Open gulpfile.ts and edit it like this:

...
// --------------
// Build dev.
gulp.task('build.dev', (done: any) =>
 runSequence('clean.dev',
             'tslint',
             'css-lint',
             'build.assets.dev',
             // 'build.html_css', // the old css task we no longer need
             'build.html_scss', // the task we created
             'build.js.dev',
             'build.index.dev',
             done));
...
// --------------
// Build prod.
gulp.task('build.prod', (done: any) =>
 runSequence('clean.prod',
             'tslint',
             'css-lint',
             'build.assets.prod',
             // 'build.html_css', // the old css task we no longer need
             'build.html_scss', // the task we created
             'copy.js.prod',
             'build.js.prod',
             'build.bundles',
             'build.bundles.app',
             'build.index.prod',
             done));
...

6. Rename all .css files to .scss. Keep in mind non component scoped scss files should be included in src/assets/main.scss

As a side note, if you want to include something from node_modules you can do it like this.

// you don't have to write ../../../../node_modules/...
@import "font-awesome/scss/font-awesome.scss";