lokesh-coder
diff --git a/‎config/webpack.base.config.js
Lines changed: 1 addition & 1 deletion b/‎config/webpack.base.config.js
Lines changed: 1 addition & 1 deletion
diff --git a/‎index.js
Lines changed: 1 addition & 0 deletions b/‎index.js
Lines changed: 1 addition & 0 deletions
diff --git a/‎package.json
Lines changed: 5 additions & 2 deletions b/‎package.json
Lines changed: 5 additions & 2 deletions
diff --git a/‎src/app.jsx
Lines changed: 6 additions & 3 deletions b/‎src/app.jsx
Lines changed: 6 additions & 3 deletions
diff --git a/‎src/app.scss
Lines changed: 4 additions & 41 deletions b/‎src/app.scss
Lines changed: 4 additions & 41 deletions
@@ -28,7 +28,7 @@ module.exports = function({ plugins }) {
                 },
                 {
                     test: /\.css$/i,
-                    use: ['style-loader', 'css-loader'],
+                    use: ['style-loader', 'css-loader', 'postcss-loader'],
                 },
                 {
                     test: /\.(png|jpe?g|gif)$/i,
 
@@ -1,6 +1,7 @@
 import React, { Suspense } from 'react';
 import ReactDOM from 'react-dom';
 import Loader from 'uielements/loader/loader.component';
+
 const App = React.lazy(() => import('./src/app'));
 
 const Index = () => (
 
@@ -4,9 +4,11 @@
   "description": "Simple react boilerplate with support for travis ci, webpack, sass etc.",
   "main": "index.js",
   "scripts": {
-    "build": "webpack ---config ./config/webpack.prod.config.js",
-    "dev": "webpack-dev-server --config ./config/webpack.dev.config.js --open",
+    "build": "npm run build:css && webpack ---config ./config/webpack.prod.config.js",
+    "dev": "npm run watch:css && webpack-dev-server --config ./config/webpack.dev.config.js --open",
     "lint": "./node_modules/.bin/eslint --ext .js,.jsx src/",
+    "build:css": "postcss src/styles.css -o src/main.css", 
+    "watch:css": "postcss src/styles.css -o src/main.css",
     "test": "jest --collect-coverage",
     "test:watch": "jest --watch"
   },
@@ -51,6 +53,7 @@
     "jest": "^25.3.0",
     "mini-css-extract-plugin": "^0.9.0",
     "node-sass": "^4.13.1",
+    "postcss-loader": "^3.0.0",
     "sass-loader": "^8.0.2",
     "style-loader": "^1.1.3",
     "webpack-bundle-analyzer": "^3.6.1",
 
@@ -1,12 +1,15 @@
 import React from 'react';
 import logo from './logo.png';
+import Button from 'uielements/button/button.component';
 import './app.scss';
+import './main.css';
 
 export default function App() {
   return (
-    <div className="App--Container">
-      <p className="App--Title">Welcome To React Boilerplate!</p>
-      <img src={logo} alt="React Logo" className="App--Image" />
+    <div className="bg-blue-900 flex flex-col justify-center items-center p-20">
+        <p className="text-4xl text-blue-100">Welcom To React Boilerplate!</p>
+        <img src={logo} className="app--image" />
+        <Button  buttonText="Get Started!" />
     </div>
   );
 }
@@ -1,42 +1,5 @@
-$bg-color: #282b33;
-$txt-color: white;
-$primary-color: #61dbfc;
-
-body {
-    margin: 0px;
+.app--image {
+    height: 200px;
+    animation: rotation 10s infinite linear;
+    -webkit-animation:rotation 10s infinite linear;
 }
-
-.App--Container {
-    display: flex;
-    flex: 1;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    background: $bg-color;
-    color: $txt-color;
-    padding: 0;
-    margin: 0;
-    color: $primary-color;
-
-    .App--Image {
-        height: 200px;
-        animation: rotation 10s infinite linear;
-        -webkit-animation:rotation 10s infinite linear;
-    }
-
-    .App--Title {
-        font-size: 2rem;
-    }
-}
-
-@keyframes rotation {
-   from { 
-       -webkit-transform:rotate(0deg); 
-       transform: rotate(0deg);
-    }
-   to   { 
-       -webkit-transform:rotate(359deg); 
-       transform: rotate(359deg);
-   }
-}
-
Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@ module.exports = function({ plugins }) {`
`28`	`28`	`},`
`29`	`29`	`{`
`30`	`30`	`test: /\.css$/i,`
`31`		`- use: ['style-loader', 'css-loader'],`
	`31`	`+ use: ['style-loader', 'css-loader', 'postcss-loader'],`
`32`	`32`	`},`
`33`	`33`	`{`
`34`	`34`	`test: /\.(png\|jpe?g\|gif)$/i,`