Cómo compilar archivos SASS .scss en el método más básico (sin framework)

¿Qué hace la compilación?

La compilación de archivos Sass transforma las hojas de estilo con sintaxis específica de Sass, como el anidamiento de selectores y los mixins, en CSS normal que puede ser analizado por los navegadores.

¿Cómo le ordeno que compile los archivos .scss en la carpeta de arriba en la carpeta public/build/css/?

Como ya estás usando Bower que es un paquete Node.js, asumo que no tienes problema en usar el paquete Node.js node-sass en lugar de la versión original de Ruby.

Primero, instala el paquete usando npm i -D node-sass. A continuación, crea un nuevo script dentro de package.json de tu proyecto:

"compile-sass": "node-sass resources/assets/sass/main.scss public/build/css/main.css"

main.scss es ahora tu punto de entrada donde importas Bootstrap y tus otras hojas de estilo.

// I don't know whether this path is correct// Just find out the location of "_bootstrap.scss" and then create the relative path@import "../../../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";/* Your custom SCSS */

Por último, para ejecutar realmente la compilación, ejecuta npm run compile-sass en tu terminal.

¿Debo configurar nuevos archivos .scss o puedo configurarlo de manera que sólo los añada a esa carpeta sass?

Como nunca se le dice a node-sass que «compile todo dentro de esta carpeta» y en su lugar se utiliza un archivo de punto de entrada (main.js), cuando se quiere incluir un nuevo archivo simplemente se añade una directiva @import con una ruta relativa al mismo.

¿Cómo le digo que minifique el archivo de salida, o no (para poder experimentar con ambas formas)?

Para minificar el archivo main.css resultante, recomiendo csso. Puedes instalar su paquete CLI usando npm i -D csso-cli y luego añadir otro script a tu package.json:

"minify-css": "csso public/build/css/main.css public/build/css/main.min.css"

Entonces puedes ejecutar ese script usando npm run minify-css. El archivo minificado saldrá como main.min.css.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.