Sådan kompileres SASS .scss-filer på den mest basale måde (uden framework)

Hvad gør kompileringen?

Kompilering af Sass-filer omdanner stylesheets med Sass-specifik syntaks som f.eks. selector nesting og mixins til normal CSS, der kan analyseres af browsere.

Hvordan instruerer jeg den i at kompilere .scss-filerne i mappen ovenfor i mappen public/build/css/?

Da du allerede bruger Bower, som er en Node.js-pakke, går jeg ud fra, at du ikke har noget problem med at bruge Node.js-pakken node-sass i stedet for den originale Ruby-version.

Først skal du installere pakken ved hjælp af npm i -D node-sass. Derefter opretter du et nyt script inde i dit projekts package.json:

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

main.scss er nu dit indgangspunkt, hvor du importerer Bootstrap og dine andre stylesheets.

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

Finalt, for rent faktisk at køre kompileringen, skal du udføre npm run compile-sass i din terminal.

Må jeg konfigurere nye .scss-filer, eller kan jeg indstille det sådan, at de bare tilføjes til denne sass-mappe?

Da du aldrig fortæller node-sass at “kompilere alt i denne mappe” og i stedet bruger en entry point-fil (main.js), skal du, når du vil inkludere en ny fil, blot tilføje et @import-direktiv med en relativ sti til den.

Bonus, hvordan fortæller jeg den, at den skal minificere outputfilen eller ej (så jeg kan eksperimentere med begge måder)?

For at minificere den resulterende main.css-fil, anbefaler jeg csso. Du kan installere dens CLI-pakke ved hjælp af npm i -D csso-cli og derefter tilføje et andet script til din package.json:

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

Du kan derefter køre dette script ved hjælp af npm run minify-css. Den minificerede fil vil blive udgivet som main.min.css.

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.