Merge pull request #30 from kacper-cyra/km38/change-css-to-scss

Change css to scss
kacper-cyra · Dec 10, 2021 · 3aa4b57 · 3aa4b57
2 parents 71e36fa + bcf7533
commit 3aa4b57
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -1,19 +1,19 @@
 <!DOCTYPE html>
 <html lang="pl">
-<head>
-    <meta charset="UTF-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>CodersCamp2020 | Star Wars API QUIZ</title>
-    <link rel="stylesheet" href="styles/App.css"/>
 
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
-          rel="stylesheet">
-</head>
-<body>
-<div id="swquiz-app">
-</div>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="swquiz-app"></div>
 
-<script src="src/index.js" type="module"></script>
-</body>
+    <script src="src/index.js" type="module"></script>
+  </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "clean": "rimraf .cache && rimraf coverage && rimraf dist && rimraf node_modules",
     "prebuild": "rimraf dist",
     "build": "parcel build index.html --public-url ./",
-    "format": "prettier --write \"src/**/*.js\" \"src/**/*.ts\" \"test/**/*.js\" \"test/**/*.ts\"",
+    "format": "prettier --write \"src/**/*.js\" \"src/**/*.ts\" \"test/**/*.js\" \"test/**/*.ts\" \"src/**/*.scss\"",
     "start:dev": "parcel index.html",
     "test": "jest",
     "test:watch": "jest --watch",
@@ -30,6 +30,7 @@
   "devDependencies": {
     "@babel/core": "^7.16.0",
     "@babel/preset-env": "^7.11.5",
+    "@parcel/transformer-sass": "^2.0.1",
     "@testing-library/dom": "^8.11.1",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/user-event": "^13.5.0",

diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,6 @@
 import 'regenerator-runtime/runtime'; //async/await with Parcel
 import { App } from './app/App';
+import './themes/style.scss'; // Import scss
 
 const ONE_SECOND_MILLIS = 1000;
 const SW_API_BASE_URL = process.env.SW_API_BASE_URL || 'https://swapi.dev/api';

diff --git a/src/themes/style.scss b/src/themes/style.scss
@@ -0,0 +1,3 @@
+body {
+  font-family: 'Montserrat', sans-serif;
+}
diff --git a/styles/App.css b/styles/App.css