Vad gör kompileringen?
Med hjälp av kompilering av Sass-filer förvandlas formatmallar med Sass-specifik syntax, t.ex. selektorsnestning och mixins, till vanlig CSS som kan analyseras av webbläsare.
Hur instruerar jag den att kompilera .scss-filerna i mappen ovan i mappen
public/build/css/?
Då du redan använder Bower, som är ett Node.js-paket, antar jag att du inte har några problem med att använda Node.js-paketet node-sass i stället för den ursprungliga Ruby-versionen.
Installerar du först paketet med npm i -D node-sass. Skapa sedan ett nytt skript i ditt projekts package.json:
"compile-sass": "node-sass resources/assets/sass/main.scss public/build/css/main.css"main.scss är nu din ingångspunkt där du importerar Bootstrap och dina andra formatmallar.
// 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 */För att faktiskt köra kompileringen utför du npm run compile-sass i din terminal.
Måste jag konfigurera nya .scss-filer eller kan jag ställa in det så att jag bara lägger till dem i den sass-mappen?
Då du aldrig säger till node-sass att ”kompilera allt i den här mappen” utan istället använder en ingångsfil (main.js), när du vill inkludera en ny fil lägger du helt enkelt till ett @import-direktiv med en relativ sökväg till den.
Bonus, hur säger jag till den att den ska minifiera utdatafilen, eller inte (så att jag kan experimentera med båda sätten)?
För att minifiera den resulterande main.css-filen rekommenderar jag csso. Du kan installera dess CLI-paket med hjälp av npm i -D csso-cli och sedan lägga till ett annat skript i din package.json:
"minify-css": "csso public/build/css/main.css public/build/css/main.min.css"Du kan sedan köra det skriptet med hjälp av npm run minify-css. Den minifierade filen kommer att skickas ut som main.min.css.
.