Este dilema se puede tratar de diferentes formas, por lo tanto te damos la que para nosotros es la resolución más completa.
Solución:
Esta es mi configuración para la construcción de css
"scripts":
"css": "node-sass src/style.scss -o dist",
"css:watch": "npm run css && node-sass src/style.scss -wo dist"
,
"devDependencies":
"node-sass": "^3.4.2"
El indicador -o establece el directorio para generar el css. Tengo una versión que no se ve “css” porque la versión de observación “css:watch” ~no se compila tan pronto como se ejecuta~, solo se ejecuta al cambiar, así que llamo
npm run css
antes de llamar
node-sass src/style.scss -wo dist
Si solo desea que se ejecute en el cambio, y no cuando se ejecuta por primera vez, simplemente use
"css:watch": "node-sass src/style.scss -wo dist"
Sobre la base de las respuestas anteriores, otra opción es aprovechar los argumentos de script personalizados de NPM para permanecer SECO al no repetir el build argumentos de script en el watch texto:
"scripts":
"build:sass": "node-sass -r --output-style compressed src/style.scss -o dist",
"watch:sass": "npm run build:sass && npm run build:sass -- -w"
En el ejemplo anterior, el watch:sass el script funciona de la siguiente manera:
- ejecutar el
build:sasstexto. Esto compilará tu CSS. - ejecutar el
build:sassguión de nuevo, pero esta vez incluye el-wbandera. Esto compilará su CSS cuando cambie uno de sus archivos SASS.
Observe la -- opción utilizada al final de la watch:sass texto. Esto se usa para pasar argumentos personalizados al ejecutar un script. De los documentos:
A partir de [email protected], puede usar argumentos personalizados al ejecutar scripts. La opción especial — es utilizada por getopt para delimitar el final de las opciones. npm pasará todos los argumentos después de — directamente a su secuencia de comandos.
Sección de Reseñas y Valoraciones
Puedes añadir valor a nuestro contenido informacional cooperando tu veteranía en las observaciones.