Merge pull request #2 from Stackup-Rwanda/ch-setup-sass-processing-171380687

#171380687 Setup sass processing

Author: kipropbrian

README.md

@@ -23,3 +23,8 @@
 4. [TravisCI](https://travis-ci.org/) for continuous integration
 5. [JestJS](https://jestjs.io/docs/en/webpack) for testing
 6. [Enzyme](https://enzymejs.github.io/enzyme/docs/installation/) for DOM testing
+
+### D. Dependencies
+1. [node-sass](https://www.npmjs.com/package/node-sass)
+2. [sass](https://www.npmjs.com/package/sass)
+3. [sass-loader](https://www.npmjs.com/package/sass-loader)

package.json

@@ -60,6 +60,9 @@
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-react-hooks": "^2.5.1"
+    "eslint-plugin-react-hooks": "^2.5.1",
+    "node-sass": "^4.14.1",
+    "sass": "^1.26.5",
+    "sass-loader": "^8.0.2"
   }
 }

src/entry/index.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
+import '../styles/sass/index.scss';
+import '../styles/css/index.css';
 
 ReactDOM.render(<App />, document.getElementById('root'));

src/styles/css/index.css

@@ -0,0 +1,5 @@
+h1 {
+  font-family: Arial, Helvetica, sans-serif;
+  text-align: center;
+  padding: 20px;
+}

src/styles/sass/index.scss

@@ -0,0 +1,7 @@
+$color: #00A799;
+$text: #FFFFFF;
+
+body {
+  background-color: $color;
+  color: $text;
+}

webpack.config.js

@@ -26,8 +26,9 @@ module.exports = (env) => ({
         use: ['babel-loader'],
       },
       {
-        test: /\.css$/,
-        loader: ['style-loader', 'css-loader'],
+        test: /\.(scss|css)$/,
+        exclude: /node_modules/,
+        loader: ['style-loader', 'css-loader', 'sass-loader'],
       },
       {
         test: /\.(png|jpg|svg|gif|jpeg)?$/,