Fix import error to deploy GH-pages

catherineisonline · Mar 1, 2024 · c4ec2b6 · c4ec2b6
1 parent 80fd133
commit c4ec2b6
Show file tree

Hide file tree

Showing 5 changed files with 8,449 additions and 3,053 deletions.
diff --git a/README.md b/README.md
@@ -45,6 +45,8 @@ Start with the latest version of NPM to avoid any errors:
 - Also install additional dependencies
 ``` 
  npm i --save core-js regenerator-runtime
+ npm install @parcel/transformer-sass --save-dev
+
  ```
 
 ### Installation

diff --git a/index.html b/index.html
@@ -6,9 +6,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700" rel="stylesheet" />
-  <link rel="shortcut icon" href="src/assets/img/favicon.png" type="image/x-icon" />
-  <link rel="stylesheet" href="src/core-ui/main.scss" />
-  <script type="module" defer src="src/scripts/controller.js"></script>
+
+  <link rel="shortcut icon" href="/src/assets/img/favicon.png" type="image/x-icon" />
+  <link rel="stylesheet" href="/src/core-ui/main.scss" />
+  <script type="module" defer src="/src/scripts/controller.js"></script>
 
   <title>Forkify Recipes</title>
 </head>
@@ -17,13 +18,13 @@
   <div class="container">
     <header class="header">
       <a href="https://forkify-recipe-api.vercel.app/">
-        <img src="src/assets/img/logo.png" alt="Logo" class="header__logo" />
+        <img src="/src/assets/img/logo.png" alt="Logo" class="header__logo" />
       </a>
       <form class="search">
         <input type="text" class="search__field" placeholder="Search over 1,000,000 recipes..." />
         <button class="btn search__btn">
           <svg class="search__icon">
-            <use href="src/assets/img/icons.svg#icon-search"></use>
+            <use href="/src/assets/img/icons.svg#icon-search"></use>
           </svg>
           <span>Search</span>
         </button>
@@ -34,15 +35,15 @@
           <li class="nav__item">
             <button class="nav__btn nav__btn--add-recipe">
               <svg class="nav__icon">
-                <use href="src/assets/img/icons.svg#icon-edit"></use>
+                <use href="/src/assets/img/icons.svg#icon-edit"></use>
               </svg>
               <span>Add recipe</span>
             </button>
           </li>
           <li class="nav__item">
             <button class="nav__btn nav__btn--bookmarks">
               <svg class="nav__icon">
-                <use href="src/assets/img/icons.svg#icon-bookmark"></use>
+                <use href="/src/assets/img/icons.svg#icon-bookmark"></use>
               </svg>
               <span>Bookmarks</span>
             </button>
@@ -51,7 +52,7 @@
                 <div class="message">
                   <div>
                     <svg>
-                      <use href="src/assets/img/icons.svg#icon-smile"></use>
+                      <use href="/src/assets/img/icons.svg#icon-smile"></use>
                     </svg>
                   </div>
                   <p>
@@ -88,7 +89,7 @@
         <div class="message">
           <div>
             <svg>
-              <use href="src/assets/img/icons.svg#icon-smile"></use>
+              <use href="/src/assets/img/icons.svg#icon-smile"></use>
             </svg>
           </div>
           <p>Hungry? Start by searching for a recipe or an ingredient. Have fun!</p>
@@ -132,7 +133,7 @@ <h3 class="upload__heading">Ingredients</h3>
 
       <button class="btn upload__btn">
         <svg>
-          <use href="src/assets/img/icons.svg#icon-upload-cloud"></use>
+          <use href="/src/assets/img/icons.svg#icon-upload-cloud"></use>
         </svg>
         <span>Upload</span>
       </button>