Added sass support

StephenGrider · Jun 7, 2015 · f1ee028 · f1ee028
1 parent 537d36f
commit f1ee028
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 3 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 node_modules/
 main.js
+style.css
diff --git a/gulpfile.js b/gulpfile.js
@@ -6,6 +6,9 @@ var watchify = require('watchify');
 var reactify = require('reactify');
 var notifier = require('node-notifier');
 var server = require('gulp-server-livereload');
+var concat = require('gulp-concat');
+var sass = require('gulp-sass');
+var watch = require('gulp-watch');
 
 var notify = function(error) {
   var message = 'In: ';
@@ -58,11 +61,26 @@ gulp.task('serve', function(done) {
       livereload: {
         enable: true,
         filter: function(filePath, cb) {
-          cb( /main.js/.test(filePath) )
+          if(/main.js/.test(filePath)) {
+            cb(true)
+          } else if(/style.css/.test(filePath)){
+            cb(true)
+          }
         }
       },
       open: true
     }));
 });
 
-gulp.task('default', ['build', 'serve']);
+gulp.task('sass', function () {
+  gulp.src('./sass/**/*.scss')
+    .pipe(sass().on('error', sass.logError))
+    .pipe(concat('style.css'))
+    .pipe(gulp.dest('./'));
+});
+
+gulp.task('default', ['build', 'serve', 'sass', 'watch']);
+
+gulp.task('watch', function () {
+  gulp.watch('./sass/**/*.scss', ['sass']);
+});
diff --git a/index.html b/index.html
@@ -1,5 +1,6 @@
 <head>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+  <link rel="stylesheet" href="style.css">
 </head>
 <body>
   <div class="container">

diff --git a/package.json b/package.json
@@ -12,8 +12,10 @@
     "gulp": "^3.8.11",
     "gulp-concat": "^2.5.2",
     "gulp-react": "^3.0.1",
+    "gulp-sass": "^2.0.1",
     "gulp-server-livereload": "^1.3.0",
     "gulp-util": "^3.0.4",
+    "gulp-watch": "^4.2.4",
     "node-notifier": "^4.2.1",
     "react": "^0.13.1",
     "reactify": "^1.1.0",

diff --git a/sass/style.scss b/sass/style.scss
@@ -0,0 +1,3 @@
+.black {
+  color: black
+}
diff --git a/src/app.jsx b/src/app.jsx
@@ -2,7 +2,7 @@ var React = require('react');
 
 var Hello = React.createClass({
   render: function() {
-    return <h1>
+    return <h1 className="red">
       Hello!
     </h1>
   }