fix: replace .css with .scss

Author: patrickmichalina

package-lock.json

@@ -40,6 +40,7 @@
     "@types/favicons": "^5.1.0",
     "@types/iltorb": "^2.0.1",
     "@types/inquirer": "^0.0.42",
+    "@types/node-sass": "^3.10.32",
     "@types/npm": "^2.0.29",
     "@types/sinon": "^5.0.1",
     "@types/yargs": "^11.0.0",
@@ -51,16 +52,16 @@
     "prettier": "^1.13.7",
     "pretty-quick": "^1.6.0",
     "semantic-release": "^15.6.3",
-    "sinon": "^6.1.0",
+    "sinon": "^6.1.2",
     "tslint-immutable": "^4.6.0",
     "validate-commit-msg": "^2.14.0"
   },
   "dependencies": {
     "@angular/animations": "^6.1.0-beta.3",
     "@angular/common": "^6.1.0-beta.3",
-    "@angular/core": "^6.1.0-beta.3",
     "@angular/compiler": "^6.1.0-beta.3",
     "@angular/compiler-cli": "^6.1.0-beta.3",
+    "@angular/core": "^6.1.0-beta.3",
     "@angular/http": "^6.1.0-beta.3",
     "@angular/platform-browser": "^6.1.0-beta.3",
     "@angular/platform-browser-dynamic": "^6.1.0-beta.3",
@@ -71,7 +72,7 @@
     "@types/cookie-parser": "^1.4.1",
     "@types/express": "^4.16.0",
     "@types/jest": "^23.1.4",
-    "@types/node": "^10.3.3",
+    "@types/node": "^10.5.2",
     "ajv": "^6.5.2",
     "chalk": "^2.4.1",
     "consolidate": "^0.15.1",
@@ -87,6 +88,7 @@
     "jest-preset-angular": "^5.2.3",
     "jest-zone-patch": "0.0.8",
     "ng2-fused": "^0.5.1",
+    "node-sass": "^4.9.1",
     "npm": "^6.1.0",
     "pug": "^2.0.3",
     "reload": "^2.3.0",

package.json

@@ -10,6 +10,7 @@ import {
   EnvPlugin,
   WebIndexPlugin
 } from 'fuse-box'
+import { exec, task, watch } from 'fuse-box/sparky'
 import { resolve } from 'path'
 import { NgProdPlugin } from '../fusebox/ng.prod.plugin'
 import { NgPolyfillPlugin } from '../fusebox/ng.polyfill.plugin'
@@ -19,6 +20,8 @@ import { NgAotFactoryPlugin } from '../fusebox/ng.aot-factory.plugin'
 import { main as ngc } from '@angular/compiler-cli/src/main'
 import { CompressionPlugin } from '../fusebox/compression.plugin'
 import { appEnvironmentVariables } from '../utilities/environment-variables'
+import { renderSingleSass } from '../utilities/sass'
+import { SparkyFile } from 'fuse-box/sparky/SparkyFile'
 import clearTerminal from '../utilities/clear'
 import readConfig_ from '../utilities/read-config'
 
@@ -178,7 +181,16 @@ function serve(isProdBuild = false) {
         .instructions(` !> [${browserModule}]`)
         .splitConfig({ dest: '../js/modules' })
 
+      task('test', () =>
+        watch('src/**/**.*').file('*.scss', (f: SparkyFile) => {
+          f.homePath && renderSingleSass(f.homePath)
+        })
+      )
+
+      exec('test')
+
       logInfo('Bundling your application, this may take some time...')
-      fuseBrowser.run()
+
+      fuseBrowser.run({ chokidar: { ignored: /.scss/g } })
     })
 }

src/commands/serve.ts

@@ -57,7 +57,7 @@ export function generateCoreAngularApp(projectDir: string, universal = true) {
           appRoutingModuleTemplate
         ),
         writeFile_(`${baseDir}/app.component.ts`, appComponentTemplate),
-        writeFile_(`${baseDir}/app.component.css`, appComponentCssTemplate), // TODO: write component generator function instead
+        writeFile_(`${baseDir}/app.component.scss`, appComponentCssTemplate), // TODO: write component generator function instead
         writeFile_(`${baseDir}/app.component.html`, appComponentHtmlTemplate),
         writeFile_(`${baseDir}/index.pug`, appIndex)
       ])