Mitä kääntäminen tekee?
Sass-tiedostojen kääntäminen muuttaa tyylilomakkeet, joissa on Sass-spesifistä syntaksia, kuten selectorien sisäkkäisrakentamista ja mixinejä, tavalliseksi CSS:ksi, jota selaimet pystyvät jäsentämään.
Miten määrään sen kääntämään .scss-tiedostot, jotka ovat yllä olevassa kansiossa kansiossa
public/build/css/?
Koska käytät jo Boweria, joka on Node.js-paketti, oletan, että sinulla ei ole mitään ongelmaa käyttää Node.js-pakettia node-sass alkuperäisen Ruby-version sijasta.
Asenna paketti ensin npm i -D node-sass. Luo sitten uusi skripti projektisi sisälle package.json:
"compile-sass": "node-sass resources/assets/sass/main.scss public/build/css/main.css"main.scss on nyt sisääntulopisteesi, jonne tuot Bootstrapin ja muut tyylilajit.
// 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 */Viimeiseksi, jotta voit oikeasti suorittaa käännöksen, suorita npm run compile-sass terminaalissasi.
Pitäisikö minun konfiguroida uudet .scss-tiedostot, vai voinko säätää sen niin, että se vain lisää ne tuohon sass-kansioon?
Koska et koskaan käske node-sass:n ”kääntää kaikki tämän kansion sisällä” ja käytät sen sijaan aloituspistetiedostoa (main.js), kun haluat sisällyttää uuden tiedoston, lisäät yksinkertaisesti @import-direktiivin, jossa on suhteellinen polku siihen.
Bonus, miten sanon sille, että se pienentää tulostiedoston vai ei (jotta voin kokeilla molempia tapoja)?
Tulostiedoston main.css pienentämiseksi suosittelen csso. Voit asentaa sen CLI-paketin käyttämällä npm i -D csso-cli ja lisätä sitten toisen skriptin package.json:
"minify-css": "csso public/build/css/main.css public/build/css/main.min.css"Voit sitten ajaa tämän skriptin käyttämällä npm run minify-css. Pienennetty tiedosto tulostuu muodossa main.min.css.
.