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:

...
import {DEPENDENCIES, APP_SRC, TMP_DIR, CSS_DEST, APP_DEST, BROWSER_LIST, ENV} from '../../config';
...
// 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 DEPENDENCIES.filter(d => /\.scss$/.test(d.src));
}


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

3. In tools/config/project.config.ts

• add: this.CSS_PROD_BUNDLE = 'main.css'; anywhere; and

• in the constructor, edit it like this:

  this.APP_ASSETS = [
    //...
    // { src: `${this.ASSETS_SRC}/main.css`, inject: true }, // the old css file
    { src: `${this.ASSETS_SRC}/main.scss`, inject: true }, // renamed SASS file
  ];

4. Copy `tools/tasks/seed/build.index.dev.ts` to `tools/tasks/project/build.index.dev.ts` and edit it like this:

 ```js
...
import {APP_SRC, APP_DEST, APP_BASE, DEV_DEPENDENCIES, CSS_DEST, ASSETS_SRC} from '../../config';
...
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. Copy tools/tasks/seed/css-lint.ts to tools/tasks/project/scss-lint.ts and edit it like this:

...
// basically you can replace everything from lintComponentCss with this code
function lintComponentScss() {
 return gulp.src([
     join(APP_SRC, '**', '*.scss'),
     '!' + join(APP_SRC, 'assets', '**', '*.scss')
   ])
   .pipe(isProd ? plugins.cached('css-lint') : plugins.util.noop())
   .pipe(plugins.postcss(processors));
}

function lintExternalScss() {
 return gulp.src(getExternalScss().map(r => r.src))
   .pipe(isProd ? plugins.cached('scss-lint') : plugins.util.noop())
   .pipe(plugins.postcss(processors));
}

function getExternalScss() {
 return DEPENDENCIES.filter(d => /\.scss/.test(d.src) && !d.vendor);
}


export = () => merge(lintComponentScss(), lintExternalScss());

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

...
// --------------
// Build dev.
gulp.task('build.dev', (done: any) =>
 runSequence('clean.dev',
             'tslint',
             // 'css-lint', // the old css task we no longer need
             'scss-lint', // the task we created
             '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', // the old css task we no longer need
             'scss-lint', // the task we created
             '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));
...

7. 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";