[Ivan Diaz] - Move sass files to all the app and core-components. Also, use gulp-sass-bulk-import

gulp/config.js

@@ -15,7 +15,7 @@ module.exports = {
   },
 
   'styles': {
-    'src': './src/styles/**/*.scss',
+    'src': './src/**/*.scss',
     'dest': './build/css/'
   },
 

gulp/tasks/sass.js

@@ -5,12 +5,14 @@ var sass         = require('gulp-sass');
 var gulpif       = require('gulp-if');
 var browserSync  = require('browser-sync');
 var autoprefixer = require('gulp-autoprefixer');
+var bulkSass     = require('gulp-sass-bulk-import');
 var handleErrors = require('../util/handle-errors');
 var config       = require('../config');
 
 gulp.task('sass', function () {
 
   return gulp.src(config.styles.src)
+	.pipe(bulkSass())
     .pipe(sass({
       sourceComments: global.isProd ? 'none' : 'map',
       sourceMap: 'sass',

package.json

@@ -37,6 +37,7 @@
     "gulp-notify": "^2.2.0",
     "gulp-rename": "^1.2.2",
     "gulp-sass": "^2.0.x",
+    "gulp-sass-bulk-import": "^0.3.2",
     "gulp-sourcemaps": "^1.5.2",
     "gulp-streamify": "0.0.5",
     "gulp-uglify": "^1.2.0",

src/core-components/button.scss

@@ -1,3 +1,5 @@
+@import "../scss/vars";
+
 .button {
 
   &:focus {

src/main.scss

@@ -0,0 +1,7 @@
+@import 'scss/reset';
+@import 'scss/vars';
+@import 'scss/typography';
+@import 'scss/base';
+
+@import 'core-components/*';
+@import 'app/*';

src/styles/app-components/_footer.scss

@@ -1,4 +0,0 @@
-footer {
-  height: 50px;
-  background: #eeeeee;
-}

src/styles/app-components/_header.scss

@@ -1,4 +0,0 @@
-header {
-  height: 50px;
-  background: #eeeeee;
-}

src/styles/main.scss

@@ -1,10 +0,0 @@
-@import 'reset';
-@import 'vars';
-@import 'typography';
-@import 'base';
-
-@import 'core-components/button';
-@import 'core-components/widget';
-
-@import 'app-components/main-layout';
-@import 'app-components/footer';