From bcf75334687d2ff307994937913ef36745c8b04e Mon Sep 17 00:00:00 2001 From: kamack38 <64226248+kamack38@users.noreply.github.com> Date: Thu, 9 Dec 2021 21:13:49 +0100 Subject: [PATCH] Change css to scss --- index.html | 26 ++++++++-------- package-lock.json | 69 +++++++++++++++++++++++++++++++++++++++++++ package.json | 3 +- src/index.js | 1 + src/themes/style.scss | 3 ++ styles/App.css | 3 -- 6 files changed, 88 insertions(+), 17 deletions(-) create mode 100644 src/themes/style.scss delete mode 100644 styles/App.css diff --git a/index.html b/index.html index 56efce6..12db059 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,19 @@ - - - - + + + + CodersCamp2020 | Star Wars API QUIZ - - - - -
-
+ + + +
- - + + diff --git a/package-lock.json b/package-lock.json index b0d0c75..0e26ec7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,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", @@ -3874,6 +3875,25 @@ "url": "https://opencollective.com/parcel" } }, + "node_modules/@parcel/transformer-sass": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@parcel/transformer-sass/-/transformer-sass-2.0.1.tgz", + "integrity": "sha512-Qk4+8N1zNaBxXRqjJvzjLjutuuhyw/3MHSA6wjvY5BqQB22GtDFE8h9KFSFN7hPdU8CEiBntKe1diqeckPCg4w==", + "dev": true, + "dependencies": { + "@parcel/plugin": "^2.0.1", + "@parcel/source-map": "^2.0.0", + "sass": "^1.38.0" + }, + "engines": { + "node": ">= 12.0.0", + "parcel": "^2.0.1" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, "node_modules/@parcel/transformer-svg": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/@parcel/transformer-svg/-/transformer-svg-2.0.1.tgz", @@ -7779,6 +7799,12 @@ "node": ">= 4" } }, + "node_modules/immutable": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz", + "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==", + "dev": true + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -13086,6 +13112,22 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, + "node_modules/sass": { + "version": "1.44.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.44.0.tgz", + "integrity": "sha512-0hLREbHFXGQqls/K8X+koeP+ogFRPF4ZqetVB19b7Cst9Er8cOR0rc6RU7MaI4W1JmUShd1BPgPoeqmmgMMYFw==", + "dev": true, + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=8.9.0" + } + }, "node_modules/saxes": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz", @@ -17438,6 +17480,17 @@ "react-refresh": "^0.9.0" } }, + "@parcel/transformer-sass": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@parcel/transformer-sass/-/transformer-sass-2.0.1.tgz", + "integrity": "sha512-Qk4+8N1zNaBxXRqjJvzjLjutuuhyw/3MHSA6wjvY5BqQB22GtDFE8h9KFSFN7hPdU8CEiBntKe1diqeckPCg4w==", + "dev": true, + "requires": { + "@parcel/plugin": "^2.0.1", + "@parcel/source-map": "^2.0.0", + "sass": "^1.38.0" + } + }, "@parcel/transformer-svg": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/@parcel/transformer-svg/-/transformer-svg-2.0.1.tgz", @@ -20500,6 +20553,12 @@ "integrity": "sha512-2zeMQpbKz5dhZ9IwL0gbxSW5w0NK/MSAMtNuhgIHEPmaU3vPdKPL0UdvUCXs5SS4JAwsBxysK5sFMW8ocFiVjQ==", "dev": true }, + "immutable": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz", + "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==", + "dev": true + }, "import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -24467,6 +24526,16 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, + "sass": { + "version": "1.44.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.44.0.tgz", + "integrity": "sha512-0hLREbHFXGQqls/K8X+koeP+ogFRPF4ZqetVB19b7Cst9Er8cOR0rc6RU7MaI4W1JmUShd1BPgPoeqmmgMMYFw==", + "dev": true, + "requires": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0" + } + }, "saxes": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz", diff --git a/package.json b/package.json index 927ee03..7a2872f 100644 --- 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 index aa1c457..49ce214 100644 --- 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 new file mode 100644 index 0000000..799154f --- /dev/null +++ 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 deleted file mode 100644 index 76c80a3..0000000 --- a/styles/App.css +++ /dev/null @@ -1,3 +0,0 @@ -body { - font-family: 'Montserrat', sans-serif; -}