Merge pull request #45 from chrisolsen/master

add the ability to use the scss format

app/index.js

@@ -74,6 +74,7 @@ ReactWebpackGenerator.prototype.askForStylesLanguage = function () {
     choices: [
         {name: 'CSS', value: 'css'},
         {name: 'SASS', value: 'sass'},
+        {name: 'SCSS', value: 'scss'},
         {name: 'LESS', value: 'less'},
         {name: 'Stylus', value: 'stylus'}
     ],

script-base.js

@@ -43,6 +43,9 @@ var Generator = module.exports = function Generator() {
         case 'sass':
             this.stylesSuffix = '.sass';
             break;
+        case 'scss':
+            this.stylesSuffix = '.scss';
+            break;
         case 'less':
             this.stylesSuffix = '.less';
             break;

templates/common/_package.json

@@ -37,7 +37,7 @@
     "grunt-contrib-copy": "~0.5.0",<% if (es6) { %>
     "6to5": "^2.7.1",
     "6to5-loader": "^1.0.0",<% } %>
-    "grunt-contrib-clean": "~0.6.0",<% if (stylesLanguage === 'sass') { %>
+    "grunt-contrib-clean": "~0.6.0",<% if (stylesLanguage.match(/s[ac]ss/)) { %>
     "sass-loader": "^0.3.1",<% } %><% if (stylesLanguage === 'less') { %>
     "less-loader": "^2.0.0",<% } %><% if (stylesLanguage === 'stylus') { %>
     "stylus-loader": "^0.5.0",<% } %>

templates/common/_webpack.config.js

@@ -42,6 +42,9 @@ module.exports = {
     },<% if (stylesLanguage === 'sass') { %> {
       test: /\.sass/,
       loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded'
+    },<% } %><% if (stylesLanguage === 'scss') { %> {
+      test: /\.scss/,
+      loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded'
     },<% } %><% if (stylesLanguage === 'less') { %> {
       test: /\.less/,
       loader: 'style-loader!css-loader!less-loader'

templates/common/_webpack.dist.config.js

@@ -52,6 +52,9 @@ module.exports = {
     },<% if (stylesLanguage === 'sass') { %> {
       test: /\.sass/,
       loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded'
+    },<% } %><% if (stylesLanguage === 'scss') { %> {
+      test: /\.scss/,
+      loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded'
     },<% } %><% if (stylesLanguage === 'less') { %> {
       test: /\.less/,
       loader: 'style-loader!css-loader!less-loader'

templates/javascript/Component.js

@@ -3,6 +3,7 @@
 var React = require('react/addons');
 <% if (stylesLanguage === 'css') { %>require('../../styles/<%= classedName %>.css');<% } %>
 <% if (stylesLanguage === 'sass') { %>require('../../styles/<%= classedName %>.sass');<% } %>
+<% if (stylesLanguage === 'scss') { %>require('../../styles/<%= classedName %>.scss');<% } %>
 <% if (stylesLanguage === 'less') { %>require('../../styles/<%= classedName %>.less');<% } %>
 <% if (stylesLanguage === 'stylus') { %>require('../../styles/<%= classedName %>.styl');<% } %>
 

templates/styles/Component.scss

@@ -0,0 +1,3 @@
+.<%= classedName %>{
+  border: 1px dashed #f00;
+}

test/test-creation.js

@@ -141,6 +141,10 @@ describe('react-webpack generator', function() {
       assertStyle('sass', done);
     });
 
+    it('should use scss style lang', function (done) {
+      assertStyle('scss', done);
+    });
+
     it('should use less style lang', function (done) {
       assertStyle('less', done);
     });