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
.