Come compilare i file SASS .scss nel metodo più semplice (senza framework)

Cosa fa la compilazione?

La compilazione dei file Sass trasforma i fogli di stile con sintassi specifica di Sass come i selettori annidati e i mixin in normali CSS che possono essere analizzati dai browser.

Come faccio ad istruirlo a compilare i file .scss nella cartella sopra nella cartella public/build/css/?

Siccome stai già usando Bower che è un pacchetto Node.js, presumo che tu non abbia problemi ad usare il pacchetto Node.js node-sass invece della versione originale Ruby.

Primo, installa il pacchetto usando npm i -D node-sass. Poi, crea un nuovo script all’interno del tuo progetto package.json:

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

main.scss è ora il tuo punto di ingresso dove importi Bootstrap e gli altri fogli di stile.

// 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 */

Infine, per eseguire effettivamente la compilazione, esegui npm run compile-sass nel tuo terminale.

Devo configurare nuovi file .scss o posso impostarlo in modo da aggiungerli semplicemente alla cartella sass?

Siccome non si dice mai a node-sass di “compilare tutto dentro questa cartella” e si usa invece un file punto di ingresso (main.js), quando si vuole includere un nuovo file si aggiunge semplicemente una direttiva @import con un percorso relativo ad esso.

Bonus, come faccio a dirgli di minificare o meno il file di output (così posso sperimentare entrambi i modi)?

Per minificare il file main.css risultante, consiglio csso. Puoi installare il suo pacchetto CLI usando npm i -D csso-cli e poi aggiungere un altro script al tuo package.json:

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

Puoi poi eseguire quello script usando npm run minify-css. Il file minificato verrà emesso come main.min.css.

.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.