Estilos del Header

Les comparto este pequeño tutorial que escribí hace ya un tiempo sobre la regla @use en Sass. @use es un reemplazo del @import que presenta varios problemas como se comenta en la documentación de esta regla.

🔽 Tutorial

Por qué @use es mejor que @import

No me reconoce @use, pero si @import

En Visual Studio Code Utilicen:

Ctrl + H

Para reemplazar el “var()” por “$”. Eso les ahorra mucho tiempo.

Hay una configuración que cuando hago npm run build me salta errores de espacios o que falta el punto y coma… No se cual configuración es pero recomiendo no ponerla

Comparto el archivo jsconfg.json

{
    "compilerOptions": {
      "baseUrl": "src",
      "paths": {
        "@icons/*": ["assets/icons/*"],
        "@logos/*": ["assets/logos/*"],
        "@context/*": ["context/*"],
        "@components/*": ["components/*"],
        "@styles/*": ["styles/*"],
        "@containers/*": ["containers/*"],
      }
    }
  }

Que pereza hacer todo esto!

Para los que no les reconoce la libreria saas les recomiendo seguir este tutorial https://exerror.com/cannot-find-module-sass-in-reactjs/

Les puede ayudar esta lectura de la documentación 👍

Con Alt + Shift pueden poner todos los $ a la vez.

Para el error de “cannot find sass module” simplemente instalen Sass manualmente.

npm install sass

No hare los pasos que hace el profe, es una perdida total de tiempo, el objetivo del curso es mostrar como migrar un proyecto para personas que nunca lo han hecho

si tienen este mensaje Selector “nav” is not pure (pure selectors must contain at least one local class or id) y no saben como solucionarlo en Header se escribio este codigo

<nav className={styles.Nav}>

por lo tanto en styles

tienen que cambiar el nav anterior por .Nav para evitar este problema

Este proyecto que viene desde el curso de #frontend developer", debería haber empezado con la introducción de Sass en ese mismo curso, hay mucho relleno en los cursos que le siguen por la forma en la que se construyó el curso de frontend developer