chore(sass): set up sass

this chore will install setup sass so one can run both .css and .scss files [Delivers #160609511]changes
andela · Nov 1, 2018 · 33a98fd · 33a98fd
1 parent c6c954d
commit 33a98fd
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.6.0",
+    "node-sass": "^4.9.4",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
     "react-router-dom": "^4.3.1",

diff --git a/public/index.html b/public/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
     <!--
@@ -36,5 +37,8 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
   </body>
 </html>
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
@@ -2,7 +2,6 @@ import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import Routes from './components/routes';
-import './App.css';
 import store from './store';
 
 const App = () => (

diff --git a/src/assets/App.css b/src/assets/App.css
@@ -0,0 +1,3 @@
+.head{
+    background-color: gainsboro
+}
diff --git a/src/assets/App.scss b/src/assets/App.scss
@@ -0,0 +1,3 @@
+.heading{
+    color: #000080
+}
diff --git a/src/components/landingPage/LandingPage.js b/src/components/landingPage/LandingPage.js
@@ -1,5 +1,7 @@
 import React from 'react';
+import '../../assets/App.scss';
+import '../../assets/App.css';
 
-const LandingPage = () => <h1>House targaryen</h1>;
+const LandingPage = () => <h1 className="heading head">House targaryen</h1>;
 
 export default LandingPage;