Tengo un problema a la hora de utilizar el "Watch Sass" desde VSCode. En primer lugar, instalé Node.js (desde la web) y luego instalé la extensión "Live Sass compiler" en VSCode. Una vez hecho eso, desde la terminal de VSCode escribo el comando "node -v" para saber qué versión de Node tengo y se instaló correctamente. Luego hice lo mismo pero con Sass con el comando "sass --version" (se instaló ok). Hecho eso, escribo el comando "npm init -y" y se me crea el package.json. Luego escribo el siguiente comando: "npm install bootstrap@next". Hecho esto, crée la carpeta manualmente llamada Sass y dentro de ella el archivo "custom.scss". Dentro de ese archivo custom.scss escribí lo siguiente: "@import "../node_modules/bootstrap/scss/bootstrap";" y le di a guardar. Y aquí el problema: Cuando le doy click al botón "Watch Sass" queda en "watching" y no pasa nada. En teoría, (según el tutorial que estoy viendo), me debería crear una carpeta CSS con los archivos custom.css y css.map pero no funciona. La única solución que encontré es hacerlo manualmente desde la terminal, con el siguiente comando: "sass --watch sass/custom.scss css/custom.css" Cómo puedo hacer para que me funcione el Watch Sass sin necesidad de escribir el comando manualmente para vincular Sass y Css? Desde ya, muchas gracias.
3 respuestas
Tal vez el problema esté en la configuración del propio Live Sass Compiler.
Crear una carpeta .vscode en tu proyecto (si no la tienes ya) y dentro un archivo settings.json.
La configuración para este plugin puede ser similar a esta:
{
/* LIVE SASS */
"liveSassCompile.settings.formats": [
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "/css"
}
],
"liveSassCompile.settings.autoprefix": [
"> 1%",
"last 2 versions"
],
"liveSassCompile.settings.generateMap": true,
"liveSassCompile.settings.excludeList": [
".vscode/**",
"css/**"
],
"liveSassCompile.settings.showOutputWindow": false,
}
En resumidas cuentas:
- Le dices que tipo de compresión quieres y dónde quieres que guarde los archivos generados.
- También le indicas los parámetros para el prefijo para los diferentes exploradores.
- Le indicas, además, si quieres que genere los archivos de mapeo. Con esta configuración no deberías tener problemas para que te funcione correctamente.
Yo tenia el mismo problema y asi lo resolvi cambie null por la carpeta donde va estar el CSS o el nombre del archivo para tu CSS. Saludos
{
// "format": "expanded",
// "extensionName": ".css",
// "savePath": null
------modificacion------
"format": "expanded",
"extensionName": ".css",
"savePath": "/css/"
}
Tengo un Macbook Air y no podía realizar la creación de la carpeta... Hice lo que indicó Jose Sanzana en su respuesta, pero no funcionaba para mi notebook, pero probé esto: basado en su información, reemplazar así el savePath: "savePath": "/css", ... y FUNCIONÓ. Dejo código.
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css",
"savePathSegmentKeys": null,
"savePathReplaceSegmentsWith": null
}
],
"vscode-edge-devtools.mirrorEdits": true
-
Cuando tengas suficiente reputación, podrás votar a favor las preguntas/respuestas que te han sido útiles. Commented el 2 abr. 2022 a las 14:46