Grunt JS Tutorial #5 - Compiling SASS

1. Installed node-sass grunt-sass
2. Added `const sass = require('node-sass');
3. Added initConfig

Note: SASS to CSS is not successful, has to deal with it later

Gruntfile.js

@@ -1,5 +1,8 @@
 module.exports = function(grunt){
     
+    const sass = require('node-sass');
+    // require('load-grunt-tasks')(grunt);
+
     // Configuration
     grunt.initConfig({
         // pass in options to plugin, references to file, etc.
@@ -10,15 +13,27 @@ module.exports = function(grunt){
                 dest: 'build/scripts.js'
             },
             css: {
-                src: ['css/*.css'],
+                src: ['css/reset.css', 'css/bootstrap.css', 'css/styles.css'],
                 dest: 'build/styles.js'
             }
+        },
+
+        sass: {
+            options: {
+                implementation: sass,
+                sourceMap: true
+            },
+            dist: {
+                files: {
+                    'css/sass/styles.scss': 'css/styles.css'
+                }
+            }
         }
     });
 
     // Load plugins
     grunt.loadNpmTasks('grunt-contrib-concat')
-    require('load-grunt-tasks')(grunt);
+    grunt.loadNpmTasks('grunt-sass');
 
     // Register tasks
     grunt.registerTask('concat-js', ['concat:js']);

css/sass/styles.scss

@@ -2,6 +2,8 @@ $base-color: #777;
 $second-color: #333;
 $heading-font: Arial;
 
+@import 'mixins';
+
 .element {
   width: 100px;
   height: 100px;
@@ -18,4 +20,5 @@ $heading-font: Arial;
 
 .heading{
   font-family: $heading-font;
+  @include ninjalink ('blue', 'red', 'pink', 'purple')
 }

package.json

@@ -6,7 +6,9 @@
   "dependencies": {},
   "devDependencies": {
     "grunt": "^1.3.0",
-    "grunt-contrib-concat": "^1.0.1"
+    "grunt-contrib-concat": "^1.0.1",
+    "grunt-sass": "^3.1.0",
+    "node-sass": "^5.0.0"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"