Merge pull request #129 from michaelknoch/introduce-sass

Introduce sass
blackuy · Aug 30, 2016 · 4c3a983 · 4c3a983
2 parents 8846f15 + cd8d357
commit 4c3a983
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -17,8 +17,10 @@
   "homepage": "https://github.com/alicoding/react-webpack-babel#readme",
   "dependencies": {
     "bootstrap": "^4.0.0-alpha.3",
+    "node-sass": "^3.8.0",
     "react": "15.3.0",
-    "react-dom": "15.3.0"
+    "react-dom": "15.3.0",
+    "sass-loader": "^4.0.0"
   },
   "devDependencies": {
     "babel-core": "6.13.2",

diff --git a/src/index.jsx b/src/index.jsx
@@ -1,5 +1,5 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
-import styles from './index.css';
+import styles from './index.scss';
 import React from 'react';
 import { render } from 'react-dom';
 

diff --git a/src/index.css → src/index.scss b/src/index.css → src/index.scss
diff --git a/webpack.config.js b/webpack.config.js
@@ -15,9 +15,19 @@ loaders.push({
 		'css'
 	]
 });
+// local scss modules
+loaders.push({
+	test: /[\/\\]src[\/\\].*\.scss/,
+	loaders: [
+		'style?sourceMap',
+		'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
+		'sass'
+	]
+});
+
 // local css modules
 loaders.push({
-	test: /[\/\\]src[\/\\].*\.css$/,
+	test: /[\/\\]src[\/\\].*\.css/,
 	loaders: [
 		'style?sourceMap',
 		'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'

diff --git a/webpack.production.config.js b/webpack.production.config.js
@@ -7,9 +7,15 @@ var WebpackCleanupPlugin = require('webpack-cleanup-plugin');
 
 // local css modules
 loaders.push({
-	test: /[\/\\]src[\/\\].*\.css$/,
+	test: /[\/\\]src[\/\\].*\.css/,
 	loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
 });
+
+// local scss modules
+loaders.push({
+	test: /[\/\\]src[\/\\].*\.scss/,
+	loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]', 'sass')
+});
 // global css files
 loaders.push({
 	test: /[\/\\](node_modules|global)[\/\\].*\.css$/,