sudacode/mokuro-reader
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add scss

Browse Source
This commit is contained in:
ZXY101
2023-08-04 15:10:28 +02:00
parent 3adfa1ccf5
commit 1c3af6df13
6 changed files with 58 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
package-lock.json generated
View File

@@ -21,6 +21,7 @@
"eslint-plugin-svelte": "^2.30.0",
"prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.10.1",
"sass": "^1.64.2",
"svelte": "^4.0.5",
"svelte-check": "^3.4.3",
"tslib": "^2.4.1",
@@ -1830,6 +1831,12 @@
"node": ">= 4"
}
},
"node_modules/immutable": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.2.tgz",
"integrity": "sha512-oGXzbEDem9OOpDWZu88jGiYCvIsLHMvGw+8OXlpsvTFvIQplQbjg1B1cvKg8f7Hoch6+NGjpPsH1Fr+Mc2D1aA==",
"dev": true
},
"node_modules/import-fresh": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -2644,6 +2651,23 @@
"rimraf": "bin.js"
}
},
"node_modules/sass": {
"version": "1.64.2",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.64.2.tgz",
"integrity": "sha512-TnDlfc+CRnUAgLO9D8cQLFu/GIjJIzJCGkE7o4ekIGQOH7T3GetiRR/PsTWJUHhkzcSPrARkPI+gNWn5alCzDg==",
"dev": true,
"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": ">=14.0.0"
}
},
"node_modules/semver": {
"version": "7.5.4",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
@@ -4416,6 +4440,12 @@
"integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
"dev": true
},
"immutable": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.2.tgz",
"integrity": "sha512-oGXzbEDem9OOpDWZu88jGiYCvIsLHMvGw+8OXlpsvTFvIQplQbjg1B1cvKg8f7Hoch6+NGjpPsH1Fr+Mc2D1aA==",
"dev": true
},
"import-fresh": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -4961,6 +4991,17 @@
}
}
},
"sass": {
"version": "1.64.2",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.64.2.tgz",
"integrity": "sha512-TnDlfc+CRnUAgLO9D8cQLFu/GIjJIzJCGkE7o4ekIGQOH7T3GetiRR/PsTWJUHhkzcSPrARkPI+gNWn5alCzDg==",
"dev": true,
"requires": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
}
},
"semver": {
"version": "7.5.4",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",

1
package.json
View File

@@ -21,6 +21,7 @@
"eslint-plugin-svelte": "^2.30.0",
"prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.10.1",
"sass": "^1.64.2",
"svelte": "^4.0.5",
"svelte-check": "^3.4.3",
"tslib": "^2.4.1",

2
src/_variables.scss Normal file
View File

@@ -0,0 +1,2 @@
$background-color: #1b1b20;
$font-family: Verdana, Geneva, Tahoma, sans-serif;

12
src/app.css → src/app.scss
View File

@@ -1,11 +1,8 @@
:root {
--background-color: #1b1b20;
--font-family: Verdana, Geneva, Tahoma, sans-serif;
}
@use "variables" as *;
body {
background-color: var(--background-color);
font-family: var(--font-family);
background-color: $background-color;
font-family: $font-family;
color: white;
margin: 0;
padding: 0;
@@ -13,7 +10,7 @@
button {
border: none;
font-family: var(--font-family);
font-family: $font-family;
background-color: transparent;
color: white;
}
@@ -37,4 +34,3 @@ a:visited {
a:hover {
cursor: pointer;
}

2
src/routes/+layout.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import NavBar from '$lib/components/NavBar.svelte';
import Snackbar from '$lib/components/Snackbar.svelte';
import '../app.css';
import '../app.scss';
</script>
<NavBar />

10
svelte.config.js
View File

@@ -1,11 +1,13 @@
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';
import preprocess from 'svelte-preprocess';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: vitePreprocess(),
preprocess: preprocess({
scss: {
prependData: `@use './src/variables' as *;`
}
}),
kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.