Refactor scss files (#107)

* Fix: grunt-sass doesn't allow array for input scss files
* Add: custom_bootstrap.scss to build the custom bootstrap css
* Unify: use single quotes in scss files

League/Gruntfile.js

@@ -27,13 +27,11 @@ module.exports = function (grunt) {
                 outputStyle: 'nested' // Minify output with "compressed"
             },
             dist: {
-                files: [
-                    {
-                        'wwwroot/lib/bootstrap/bootstrap.css': ['Styles/bootstrap/_custom.scss', 'node_modules/bootstrap/scss/bootstrap.scss'],  // "destination": "source"
-                        'wwwroot/lib/fontawesome/fontawesome.css': 'Styles/fontawesome/fontawesome.scss',
-                        'wwwroot/css/site.css': 'Styles/site/site.scss'
-                    }
-                ]
+                files: {
+                    'wwwroot/lib/bootstrap/bootstrap.css': 'Styles/bootstrap/custom_bootstrap.scss',  // "destination": "source" (no arrays!)
+                    'wwwroot/lib/fontawesome/fontawesome.css': 'Styles/fontawesome/fontawesome.scss',
+                    'wwwroot/css/site.css': 'Styles/site/site.scss'
+                }
             }
         },
 

League/Styles/bootstrap/_custom.scss

@@ -1,9 +1,9 @@
-// Bootstrap dependencies - javascript and fonts must be copied separately
-// font-awesome is included by site.scss
+// This is the import file for site scss files
+// which are using variables and Bootstrap functions / mixins
 
-@import "node_modules/bootstrap/scss/functions";
+@import 'node_modules/bootstrap/scss/functions';
 
 @import './custom_variables';
 
-@import "node_modules/bootstrap/scss/variables";
-@import "node_modules/bootstrap/scss/mixins";
+@import 'node_modules/bootstrap/scss/variables';
+@import 'node_modules/bootstrap/scss/mixins';

League/Styles/bootstrap/_custom_variables.scss

@@ -1,3 +1,6 @@
+// Required
+@import 'node_modules/bootstrap/scss/functions';
+
 // Bootstrap variable overrides
 
 //
@@ -28,7 +31,7 @@ $danger: #E401CD;
 $light: $gray-100;
 $dark: $gray-800;
 
-// Reassign color vars to semantic color scheme
+// Assign color vars to semantic color scheme
 $theme-colors: ( 'primary': $primary, 'secondary': $secondary, 'success': $success, 'info': $info, 'warning': $warning, 'danger': $danger, 'light': $light, 'dark': $dark);
 
 $table-bg: $light;

League/Styles/bootstrap/custom_bootstrap.scss

@@ -0,0 +1,3 @@
+// Input file for the custom Bootstrap build
+@import './custom_variables';
+@import 'node_modules/bootstrap/scss/bootstrap';

League/Styles/site/_std-input.scss

@@ -1,14 +1,12 @@
 // **************************************
 // Variables used locally
 // **************************************
-@import '../bootstrap/custom';
-
+@import '../bootstrap/_custom';
 
 // **************************************
 // Styles
 // **************************************
 
-
 /**************************************************************
 * START: css classes coming from jquery Unobtrousive Validation
 **************************************************************/

League/Styles/site/site.scss

@@ -1,5 +1,5 @@
-@import '../bootstrap/custom';
-@import 'std-input';
+@import '../bootstrap/_custom';
+@import '_std-input';
 @import '../fontawesome/fontawesome.scss';
 
 $body-width: 60rem;