Cómo compilar archivos less / sass en Visual Studio 2017

85

En VS <= 2015 podemos usar la extensión WebEssentials que se encarga de compilar los archivos less / sass por nosotros, pero actualmente no es compatible con VS 2017. ¿Conoce una extensión similar que puede compilar less / sass en la compilación?

visual-studio sass less visual-studio-2017 css-preprocessor Mihail Shishkov
fuente

Respuestas:

104

WebEssentials se está dividiendo en varias extensiones. Creo que la funcionalidad que desea ahora está en la extensión Web Compiler .

Si desea hacerlo sin extensiones, puede usar un corredor de tareas como Gulp. Vea aquí un tutorial sobre cómo integrar las tareas de Gulp en VS.

Palanqueta
fuente
Estoy usando Web Compiler como una extensión en VS 2019 para ayudar a compilar algunos archivos .less muy antiguos y todavía funciona muy bien.
klewis
1
NOTA: Web Compiler está abandonado, la última actualización fue hace 5 años. Tiene algunos problemas sin solucionar, pero funciona.
Alex
Web Compiler funcionó para mí en VS 2019, pero no se recompila automáticamente. A menos que esté listo para usar. Debe ejecutar la compilación una vez manualmente (consulte esta respuesta ) para que se cree el archivo compilerconfig.json. Después de eso, volverá a compilar automáticamente los archivos .less.
neizan
49

ACTUALIZACIÓN - POR FAVOR LEA ESTA PÁGINA, YA QUE HE AÑADIDO UNA RESPUESTA ADICIONAL (ESTA YA PARECE QUE NO FUNCIONA PARA MÍ).

Para aquellos, como yo, que no conocen Gulp o Grunt o Shriek o Wail, y no quieren, PUEDEN obtener Visual Studio 2017 para compilar sus archivos SCSS automáticamente, tal como solía hacerlo en Visual Studio 2015. El Los pasos a continuación funcionaron para mí.

Primero desinstale las extensiones antiguas / paquetes Nuget para Web Compiler (no sé si esto es necesario o no).

Vaya a la página de descarga de la galería VSIX y elija descargar Web Compiler.

ingrese la descripción de la imagen aquí

Tenga en cuenta que hice esto primero eligiendo Herramientas / Extensiones y Actualizaciones en Visual Studio. Aunque esto pareció funcionar, descubrí que mis archivos SCSS parciales no se estaban compilando automáticamente en CSS cuando les hice cambios (no era el único ).

Ahora debería poder hacer clic con el botón derecho en su archivo SCSS maestro y elegir las opciones que se muestran a continuación, que deberían crear automáticamente un archivo llamado compilerconfig.json en la raíz de su proyecto (este paso probablemente no sea necesario si ya tiene este archivo) :

ingrese la descripción de la imagen aquí

A partir de este momento, todo pareció funcionar bien. ¡Uf! Gracias a Mads Kristensen por cierto por esta extensión, cualquier cosa para evitar aprender algo nuevo ...

Andy Brown
fuente
6
¡No entiendo este comentario! No estoy seguro de cuál es la respuesta aceptada, pero ninguna se parece en nada a la que di.
Andy Brown
1
La respuesta aceptada es la que tiene la marca verde. Actualmente tiene la mayor cantidad de votos a favor y sugiere usar la misma extensión Web Compiler. De todos modos me gusta tu respuesta por las fotos.
Mihail Shishkov
1
Gracias. Mi respuesta brinda una solución sin usar Gulp / Grunt, y también brinda los detalles adicionales que las personas necesitarán. Miré la respuesta marcada (entre otras), pero no resolvió mi problema sin la información adicional anterior, por eso me tomé el esfuerzo de publicar, solo para evitar que otros perdieran el mismo tiempo que había pasado tratando de resolver esto .
Andy Brown
1
intente leer la respuesta aceptada, dice lo mismo, pero también sugiere cómo usar Gulp
Keith Nicholas
Bien, ahora veo que la respuesta aceptada dice lo mismo, por lo que la mía solo agrega más detalles. ¡Esperamos que los lectores perezosos como yo encuentren esto útil!
Andy Brown
5

Mi respuesta anterior me funcionó durante unos meses, pero ahora ya no funciona. Cuando intento compilar, aparece un mensaje en la ventana Errores sobre problemas con el esquema CompilerConfig y no puedo resolverlo (ni buscar en Google ni instalar / desinstalar me ayudó).

Entonces, una respuesta alternativa es usar CompileSASS , que es un complemento mucho más simple, con (mucha) menos documentación en línea, pero que funciona a la perfección. Las únicas desventajas que puedo ver son:

  • el CSS generado está en la misma carpeta que el SCSS, así que tuve que mover un poco las cosas en mi sitio web para acomodarlo y
  • el CSS generado solo está minimizado, por lo que puedo ver

Una vez que haya instalado el complemento (estoy usando VS 2017), puede ir a Herramientas> Opciones para cambiar la configuración:

ingrese la descripción de la imagen aquí

¡Espero que ahora pueda reanudar el trabajo! Gracias a todos los autores de complementos, por cierto, no quiero quejarse.

Andy Brown
fuente
1
Menos mal que me desplacé todo el camino esta vez. Estaba a punto de seguir tu anterior. responder. Tal vez debería actualizarlo con una nota, si cree que la respuesta ya no funciona. :)
radbyx
Trabajado como un encanto. Muchas gracias.
radbyx
1
Si ya tiene Web Compiler y enfrenta los mismos errores descritos en esta publicación, vea mis publicaciones aquí: stackoverflow.com/a/55290276/3609362 github.com/madskristensen/WebCompiler/issues/…
Matt G
Acabo de descargar Web Compiler para Visual Studio 2019 y hasta ahora está funcionando perfectamente. ¿Hay algún problema específico de Visual Studio 2017?
Andy Brown
2

Ahora también hay un compilador menos específico. https://github.com/madskristensen/LessCompiler

Justin
fuente
Descargué e instalé la extensión. Luego abrí mi archivo Site.less y puedo ver dónde está la marca de agua para ajustar en el compilador. Luego hice una compilación en mi sitio y lo abrí en modo de depuración. Cuando abro mi Site.css, que está debajo de Site.less, tiene el generador de agua generado. Luego trato de hacer una búsqueda de una propiedad recién agregada pero no está allí y no obtengo mi CSS. ¿Alguna idea sobre cómo puedo hacer que construya mi MENOS?
Caverman