frontendcafe · anaquinpm · Jul 13, 2021
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,8 +1,8 @@
 {
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
+    "dev": "vite serve src",
+    "build": "vite build src",
     "serve": "vite preview",
     "lint": "eslint --fix"
   },
@@ -15,6 +15,7 @@
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-promise": "^5.1.0",
     "prettier": "2.3.1",
+    "sass": "^1.35.2",
     "vite": "^2.3.8"
   }
 }
diff --git a/assets/covid.json → src/assets/covid.json b/assets/covid.json → src/assets/covid.json
diff --git a/favicon.svg → src/assets/favicon.svg b/favicon.svg → src/assets/favicon.svg
diff --git a/index.html → src/index.html b/index.html → src/index.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="es">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="./assets/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite App</title>
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="./js/main.js"></script>
   </body>
 </html>
diff --git a/src/main.js → src/js/main.js b/src/main.js → src/js/main.js
@@ -1,3 +1,3 @@
-import './style.css'
+import '../scss/main.scss'
 
 document.querySelector('#app').innerHTML = `<h1>Hello Vite!</h1>`
diff --git a/src/scss/abstract/_breakpoints.scss b/src/scss/abstract/_breakpoints.scss
diff --git a/src/scss/abstract/_functions.scss b/src/scss/abstract/_functions.scss
diff --git a/src/scss/abstract/_mixins.scss b/src/scss/abstract/_mixins.scss
diff --git a/src/scss/abstract/_variables.scss b/src/scss/abstract/_variables.scss
diff --git a/src/scss/base/_index.scss b/src/scss/base/_index.scss
@@ -0,0 +1,2 @@
+@forward './reset';
+@forward './typography'
diff --git a/src/scss/base/_reset.scss b/src/scss/base/_reset.scss
@@ -0,0 +1,6 @@
+*,
+*::after,
+*::before {
+  margin: 0;
+  padding: 0;
+}
diff --git a/src/scss/base/_typography.scss b/src/scss/base/_typography.scss
diff --git a/src/scss/layout/_footer.scss b/src/scss/layout/_footer.scss
diff --git a/src/scss/layout/_grid.scss b/src/scss/layout/_grid.scss
diff --git a/src/scss/layout/_header.scss b/src/scss/layout/_header.scss
diff --git a/src/scss/layout/_index.scss b/src/scss/layout/_index.scss
@@ -0,0 +1,4 @@
+@forward './grid';
+@forward './header';
+@forward './navigation';
+@forward './footer';
diff --git a/src/scss/layout/_navigation.scss b/src/scss/layout/_navigation.scss
diff --git a/src/style.css → src/scss/main.scss b/src/style.css → src/scss/main.scss
@@ -1,3 +1,7 @@
+@use './base';
+@use './layout';
+
+// css default de Vite para comprobar que funciona
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;