¿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
.