Merge pull request #579 from alex88/sass-support

Add .sass support
redfin · Aug 17, 2016 · 5f55eba · 5f55eba
2 parents da833f5 + d23e726
commit 5f55eba
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 2 deletions.
diff --git a/packages/react-server-cli/src/compileClient.js b/packages/react-server-cli/src/compileClient.js
@@ -164,7 +164,7 @@ const packageCodeForBrowser = (entrypoints, outputDir, outputUrl, hot, minify, l
 					exclude: /node_modules/,
 				},
 				{
-					test: /\.scss$/,
+					test: /\.s(a|c)ss$/,
 					loader: extractTextLoader + "!sass-loader",
 					exclude: /node_modules/,
 				},

diff --git a/packages/react-server-cli/src/index.js b/packages/react-server-cli/src/index.js
@@ -5,6 +5,7 @@ const parseCliArgs = require("./parseCliArgs").default;
 require.extensions['.css'] =
 require.extensions['.less'] =
 require.extensions['.scss'] =
+require.extensions['.sass'] =
 function(module, filename) {
 	return module._compile("", filename);
 };

diff --git a/packages/react-server-test-pages/pages/styles/sass.js b/packages/react-server-test-pages/pages/styles/sass.js
@@ -1,9 +1,14 @@
 import "./sass.scss"
+import "./sass.sass"
 
 const RedThing = () => <div className="red-thing">This should be red</div>
+const BlueThing = () => <div className="blue-thing">This should be blue</div>
 
 export default class SassPage {
 	getElements() {
-		return <RedThing />
+		return (<div>
+			<RedThing />
+			<BlueThing />
+		</div>);
 	}
 }
diff --git a/packages/react-server-test-pages/pages/styles/sass.sass b/packages/react-server-test-pages/pages/styles/sass.sass
@@ -0,0 +1,4 @@
+$blueish: blue
+
+.blue-thing
+	background-color: $blueish