Aprende a configurar correctamente NetBeans para compilar tus archivos SASS y SCSS en CSS automáticamente cuando realices cambios.

Cómo configurar NetBeans en Windows para compilar automáticamente archivos SASS o SCSS en CSS

Sass (Syntactically Awesome Style Sheets) es una extensión de CSS que le permite usar cosas como variables, reglas anidadas, importaciones en línea y más. También ayuda a mantener las cosas organizadas y le permite crear hojas de estilo más rápido. Gracias a la implementación de preprocesadores CSS en NetBeans, podrá compilar automáticamente archivos SASS sobre la marcha en su proyecto, por lo que no tendrá que ejecutar los comandos usted mismo cada vez que realice un pequeño cambio.

En este artículo, le mostraremos cómo configurar NetBeans correctamente para compilar automáticamente archivos SASS y SCSS en CSS.

Requisitos

Necesitará SASS disponible en su computadora. Sass necesita que Ruby se instale primero y que esté disponible desde la ruta en el símbolo del sistema. Una vez que Ruby esté instalado en su computadora, puede instalar la gema sass usando el siguiente comando en su terminal:

gem install sass

Si ya tienes sass instalado, puede continuar con la configuración en NetBeans.

1. Acceso a la configuración

Como primer paso, proceda a abrir el cuadro de diálogo Propiedades de su proyecto. Este cuadro de diálogo le permite cambiar configuraciones específicas relacionadas con su proyecto y se almacenan en la carpeta nbproject de su proyecto. Para compilar archivos SASS en CSS automáticamente, NetBeans integra los llamados File Watchers que le permiten ejecutar alguna acción cuando realiza cambios en algunos archivos. Necesita configurar las opciones de preprocesadores CSS en su proyecto, así que abra el diálogo de propiedades haciendo clic derecho en su proyecto:

Netbeans Project Properties

Una vez que haga clic en propiedades, aparecerá el cuadro de diálogo Propiedades del proyecto, aquí seleccione la pestaña Preprocesadores CSS y haga clic en Configurar ejecutables:

Netbeans Sass Configure Automatically

Como siguiente paso, haga clic en Configurar ejecutables y continúe con el siguiente paso.

2. Configurar la ruta ejecutable de SASS

Para ejecutar automáticamente los comandos de compilación, Netbeans necesita la ruta absoluta al compilador sass, como se instaló con Ruby, puede encontrar el archivo cmd de la ruta del compilador sass en C:\Ruby24-x64\bin\sass.bat. Proporcione esta ruta en la entrada de ruta SASS:

SASS Configure Executable Path in Netbeans in Windows

Aplicar o guardar cambios y seguir el último paso.

3. Configure las carpetas SASS para compilar y generar la ruta

Como último paso, debe especificar dónde están los archivos SASS que se compilarán y dónde deberían estar los archivos CSS generados. En este caso, la estructura de nuestro proyecto es la siguiente:

Netbeans SASS folder structure

Así que registraría un único vigilante que convierte los archivos en /scss que /css y no se olvide de comprobar "compilar archivos SASS en Guardar", ya que se activará cada vez que se realizan cambios en los archivos de SASS:

Compile less path in netbeans

En la carpeta raíz de nuestros proyectos está la carpeta sass donde almacenaremos todos los archivos SASS. Se compilarán automáticamente en archivos CSS cuando presione CTRLSo guarde manualmente el archivo. Ahora puede modificar los archivos fuente de su proyecto y se integrarán automáticamente en CSS y estarán listos para la producción (tenga en cuenta que también deberá minimizar esos archivos para la producción).

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores