From f24184e149deac42de809ab4387a94b43ddff5c1 Mon Sep 17 00:00:00 2001 From: "marya.sadek-ext.fd" Date: Sat, 5 Nov 2022 16:53:22 +0100 Subject: [PATCH 1/3] feat: install sass --- package-lock.json | 37 +++++++++++++++++++++++++++++++++++++ package.json | 1 + 2 files changed, 38 insertions(+) diff --git a/package-lock.json b/package-lock.json index 878029f..21a6a7f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", + "sass": "^1.56.0", "typescript": "^4.7.4", "web-vitals": "^2.1.4" } @@ -8983,6 +8984,11 @@ "url": "https://opencollective.com/immer" } }, + "node_modules/immutable": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz", + "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==" + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -14735,6 +14741,22 @@ "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz", "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==" }, + "node_modules/sass": { + "version": "1.56.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.56.0.tgz", + "integrity": "sha512-WFJ9XrpkcnqZcYuLRJh5qiV6ibQOR4AezleeEjTjMsCocYW59dEG19U3fwTTXxzi2Ed3yjPBp727hbbj53pHFw==", + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/sass-loader": { "version": "12.6.0", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz", @@ -23342,6 +23364,11 @@ "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.15.tgz", "integrity": "sha512-2eB/sswms9AEUSkOm4SbV5Y7Vmt/bKRwByd52jfLkW4OLYeaTP3EEiJ9agqU0O/tq6Dk62Zfj+TJSqfm1rLVGQ==" }, + "immutable": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz", + "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==" + }, "import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -27313,6 +27340,16 @@ "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz", "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==" }, + "sass": { + "version": "1.56.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.56.0.tgz", + "integrity": "sha512-WFJ9XrpkcnqZcYuLRJh5qiV6ibQOR4AezleeEjTjMsCocYW59dEG19U3fwTTXxzi2Ed3yjPBp727hbbj53pHFw==", + "requires": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + } + }, "sass-loader": { "version": "12.6.0", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz", diff --git a/package.json b/package.json index bfb0ee5..47ca09f 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", + "sass": "^1.56.0", "typescript": "^4.7.4", "web-vitals": "^2.1.4" }, From 5f7ea96c4ca1667bbd278d8a8685ccf16c6c42e5 Mon Sep 17 00:00:00 2001 From: "marya.sadek-ext.fd" Date: Sat, 5 Nov 2022 16:53:55 +0100 Subject: [PATCH 2/3] feat: create sass scss format variables --- src/styles/_variables.scss | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 src/styles/_variables.scss diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss new file mode 100644 index 0000000..3f3f65e --- /dev/null +++ b/src/styles/_variables.scss @@ -0,0 +1,2 @@ +$bg: #282c34; +$white: white; \ No newline at end of file From 0b3c88bc258e82502abfa43a30be3061397597e3 Mon Sep 17 00:00:00 2001 From: "marya.sadek-ext.fd" Date: Sat, 5 Nov 2022 16:54:21 +0100 Subject: [PATCH 3/3] feat: convert stylesheets to scss and use sass variables --- src/{App.css => App.scss} | 6 ++++-- src/App.tsx | 2 +- src/index.tsx | 2 +- src/styles/{global.css => global.scss} | 0 4 files changed, 6 insertions(+), 4 deletions(-) rename src/{App.css => App.scss} (86%) rename src/styles/{global.css => global.scss} (100%) diff --git a/src/App.css b/src/App.scss similarity index 86% rename from src/App.css rename to src/App.scss index fd6b65d..20357d8 100644 --- a/src/App.css +++ b/src/App.scss @@ -1,3 +1,5 @@ +@use "styles/variables" as var; + .App { text-align: center; } @@ -14,13 +16,13 @@ } .App-header { - background-color: #282c34; + background-color: var.$bg; height: 93vh; display: flex; flex-direction: column; align-items: center; justify-content: center; - color: white; + color: var.$white; } footer { diff --git a/src/App.tsx b/src/App.tsx index 327cd08..6ecce69 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,7 +3,7 @@ import LocalLibraryIcon from '@mui/icons-material/LocalLibrary'; import logo from './logo.svg'; -import './App.css'; +import './App.scss'; function App() { return ( diff --git a/src/index.tsx b/src/index.tsx index fb206da..8805ccd 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -11,7 +11,7 @@ import '@fontsource/roboto/400.css'; import '@fontsource/roboto/500.css'; import '@fontsource/roboto/700.css'; import theme from "./styles/theme.js"; -import './styles/global.css'; +import './styles/global.scss'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement diff --git a/src/styles/global.css b/src/styles/global.scss similarity index 100% rename from src/styles/global.css rename to src/styles/global.scss