Estoy haciendo un curso en línea sobre CSS avanzado y Sass y descubrí que la forma en que se muestra en el curso está un poco desactualizada.
El curso usa node-sass en las dependencias, que está en desuso. Una alternativa directa a esto sería usar Dart-sass (escribiré mis pasos para hacerlo al final, tal vez alguien se beneficie de esto :))
Otra alternativa es usar la extensión de código VS "Live Sass Compiler". Parece que esta opción está bastante bien aceptada.
Sin embargo, me pregunto qué beneficios y diferencias tienen estas opciones. Por ejemplo, ayer tuve algunos problemas con la extensión y luego usé Dart Sass como dependencia y resolví mi problema de esta manera. Tal vez esto se debió a algo mal en mi código, pero aun así, me dejó con esta pregunta y creo que otros podrían tener lo mismo en el futuro.
PD: Es mi primera pregunta aquí, no me asen si hice algo mal :D
Para aquellos interesados en cómo cambiar el código de node-sass a dart-sass aquí están los pasos (al menos para mí estos fueron los pasos en el curso que hice):
npm i -D sassnode-sass para que sean simplemente sass (en package.json)-w en su secuencia de comandos watch:sass a --watch (en package.json)npm uninstall node-sass para deshacerse de élNo sé qué tutorial exacto estás viendo. Además, no tengo tanta experiencia en el front-end, pero en mi opinión, usar Sass como preprocesador css no es la mejor opción en producción por ahora.
Pero, dado que está preguntando cómo implementar sass , describiré un procedimiento, como si estuviera usando React con npx create-react-app .
Primero, tenías razón sobre usar dart-sass sobre sass . Este comando debería ayudarlo con eso: npm install --save-dev sass . Según la pregunta, parece que ya lo intentaste.
Después de eso, agregue un nuevo script a sus scripts en su archivo package.json : "sass" : "sass src/Sass:src/Css --watch --no-source-map" y listo.
En mi opinión, prefiero implementarlo a través de npm en lugar del complemento VSC. Será más estable después de todo. Pero si lo está utilizando, con fines de prueba/estudio, creo que podría probar ambos.
Si desea utilizar la versión más actual de Dart SASS con 'Live Sass Compiler', debe tener cuidado con la versión. La versión más popular no es compatible desde hace años, por lo que no es compatible con Dart Sass.
Pero hay una bifurcación que es compatible y como bifurcación puede usar la misma configuración.
A su pregunta sobre NPM y Live Sass Compiler: ambos son versiones de Javascript fuera de Sass. Como versiones de Javascript, no son tan rápidas como si instalara SASS directamente en su sistema. La diferencia entre la versión de Javascript en sí no es tan grande. Así que creo que la mejor opción entre NPM y el compilador Live Sass es usar Live Sass Compiler (¡la versión bifurcada!), ya que está integrado en el editor y es más fácil de usar directamente desde allí.
Si necesita una solución más rápida, debería instalar la versión original. Eso no es tan difícil como parece. Y también hay una extensión de VS Code que hace posible usar esa versión original instalada directamente desde VS Code.
Información detallada:
Instale SASS directamente en su sistema:
https://sass-lang.com/instalar
Información de la extensión de VS Code nombrada:
https://stackoverflow.com/a/66207572/9268485