add sass support

Author: smmoosavi

Diff for: README.md

@@ -18,5 +18,10 @@
   - and `webpack-helpers/utils.js` (add `findRule` function)
   - add `webpack-helpers/babelPatch.js` and use it in `webpack.monkey.js`
   - add and use sample decorator
+- add sass support
+  - add package `yarn add node-sass sass-loader`
+  - edit `webpack-helpers/utils.js` (add `addRule` function)
+  - add `webpack-helpers/sassPatch.js` and use it in `webpack.monkey.js`
+  - add and use sample sass file
 
 [monkey-react-scripts]: https://github.com/monkey-patches/monkey-react-scripts

Diff for: package.json

@@ -5,9 +5,11 @@
   "dependencies": {
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "monkey-react-scripts": "^0.1.0",
+    "node-sass": "^4.7.2",
     "react": "^16.1.1",
     "react-dom": "^16.1.1",
     "react-scripts": "1.0.17",
+    "sass-loader": "^6.0.6",
     "webpack-visualizer-plugin": "^0.1.11"
   },
   "scripts": {

Diff for: src/SampleDecorator.js

@@ -1,10 +1,11 @@
 import React , {Component} from 'react'
+import './sample.scss'
 
 function withRedBorder(Cmp) {
     class NewCmp extends Component {
       render () {
         return (
-            <div style={{border: '1px solid red', padding: 8}}>
+            <div style={{border: '1px solid red', padding: 8}} className="red-bg">
                 <Cmp {...this.props}/>
             </div>
         )

Diff for: src/sample.scss

@@ -0,0 +1,5 @@
+$color: lighten(red, 30%);
+
+.red-bg {
+  background-color: $color;
+}

Diff for: webpack-helpers/sassPatch.js

@@ -0,0 +1,24 @@
+const {addRule, findRule} = require('./utils')
+
+module.exports.sassPatch = function sassPatch (webpackConfig, isDevelopment) {
+  // find css rule
+  const cssRule = findRule(webpackConfig, (rule) => {
+    return ('' + rule.test === '' + /\.css$/)
+  })
+  const cssLoaders = isDevelopment ? cssRule.use : cssRule.loader
+
+  const postCssLoader = cssLoaders[cssLoaders.length - 1]
+  postCssLoader.options.sourceMap = true // add source option to postcss
+
+  // add sass support
+  const sassLoader = {loader: require.resolve('sass-loader'), options: {sourceMap: true}}
+  const sassLoaders = cssLoaders.concat(sassLoader)
+
+  const sassRule = {
+    test: /\.scss$/,
+    [isDevelopment ? 'use' : 'loader']: sassLoaders,
+  }
+
+  addRule(webpackConfig, sassRule)
+
+}

Diff for: webpack-helpers/utils.js

@@ -4,3 +4,8 @@ module.exports.findRule = function findRule(webpackConfig, callback) {
     if (index === -1) throw Error('Loader not found');
     return rules[index]
 };
+
+module.exports.addRule = function addRule (webpackConfig, rule) {
+    const rules = webpackConfig.module.rules[1].oneOf
+    rules.splice(rules.length - 1, 0, rule) // add before exclude rule
+}

Diff for: webpack.monkey.js

@@ -1,7 +1,9 @@
 const {pluginsPatch} = require('./webpack-helpers/pluginsPatch');
 const {babelPatch} = require('./webpack-helpers/babelPatch');
+const {sassPatch} = require('./webpack-helpers/sassPatch');
 
 module.exports = function (webpackConfig, isDevelopment) {
     pluginsPatch(webpackConfig, isDevelopment)
     babelPatch(webpackConfig, isDevelopment)
+    sassPatch(webpackConfig, isDevelopment)
 };