Co robi kompilacja?
Kompilacja plików Sass przekształca arkusze stylów ze specyficzną dla Sass składnią, taką jak zagnieżdżanie selektorów i mixiny, w normalny CSS, który może być parsowany przez przeglądarki.
Jak poinstruować go, aby skompilował pliki .scss w powyższym folderze w folderze
public/build/css/?
Ponieważ już używasz Bower, który jest pakietem Node.js, zakładam, że nie masz problemu z używaniem pakietu Node.js node-sass zamiast oryginalnej wersji Ruby.
Po pierwsze, zainstaluj pakiet używając npm i -D node-sass. Następnie utwórz nowy skrypt wewnątrz package.json projektu:
"compile-sass": "node-sass resources/assets/sass/main.scss public/build/css/main.css"main.scss jest teraz twoim punktem wejścia, w którym importujesz Bootstrap i inne arkusze stylów.
// 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 */Wreszcie, aby faktycznie uruchomić kompilację, wykonaj npm run compile-sass w swoim terminalu.
Czy muszę skonfigurować nowe pliki .scss, czy mogę ustawić to tak, aby po prostu dodać je do folderu sass?
Ponieważ nigdy nie mówisz node-sass, aby „skompilował wszystko wewnątrz tego folderu” i zamiast tego użyj pliku punktu wejścia (main.js), kiedy chcesz dołączyć nowy plik, po prostu dodajesz dyrektywę @import ze względną ścieżką do niego.
Bonus, jak mogę powiedzieć mu, aby zminifikował plik wyjściowy lub nie (więc mogę eksperymentować z obydwoma sposobami)?
Aby zminifikować plik wynikowy main.css, polecam csso. Możesz zainstalować jego pakiet CLI za pomocą npm i -D csso-cli, a następnie dodać inny skrypt do swojego package.json:
"minify-css": "csso public/build/css/main.css public/build/css/main.min.css"Możesz następnie uruchomić ten skrypt za pomocą npm run minify-css. Zminifikowany plik zostanie wyprowadzony jako main.min.css.
.