Upgrade to Pro — share decks privately, control downloads, hide ads and more …

sassc-railsを利用している我々は、Sassの@importの非推奨化をどのように乗り越えていくか

 sassc-railsを利用している我々は、Sassの@importの非推奨化をどのように乗り越えていくか

Hirotaka Miyagi

October 22, 2022
Tweet

More Decks by Hirotaka Miyagi

Other Decks in Programming

Transcript

  1. Sassͷ࣮૷ • Ruby Sass, LibSass, DartSass͕͋ΓɺDart SassͰݱࡏΞΫςΟϒͳ։ൃ͕ਐ ߦத • @use͸Dart

    Sassʹ͔࣮͠૷͞Ε͍ͯͳ͍ • sassc-rails͸LibSassΛ࣮ߦ͢Δ • Ruby Sass͸EOL ⚰ͰɺLibSass͸ඇਪ঑ • อक͸ܧଓ͞ΕΔ͕৽ػೳ͸αϙʔτ͞Εͳ͍ͨΊɺCSS/Sassߏจͷޓ ׵ੑ͔Βঃʑʹဃ཭͍ͯ͘͠ 12
  2. ͍ͭ·Ͱʹ@useʹҠߦ͢Ε͹ྑ͍ͷ͔ʁ • NPMͷμ΢ϯϩʔυ਺Ͱ൑அ͍ͯ͠Δ sass / (sass + node-sass) • 8,098,297

    / (8,098,297 + 2,677,869) = 75% (2022/10/22࣌఺) 18 https://github.com/sass/sass/issues/3276#issuecomment-1090803953 → 1೥Ҏ಺ͰҠߦ͓ͯ͘͠ͷ͕ແ೉
  3. cssbundling-rails • ηοτΞοϓ༻RakeλεΫͰpackage.jsonͷscriptsʹbuild:cssΛɺ npmύοέʔδͷsassΛdependenciesʹ௥Ճ • assets:precompileͷઌ಄ʹ yarn install && yarn

    build:css Λࠩ͠ࠐΉ 23 https://github.com/rails/cssbundling-rails → npm scriptsΛར༻͢ΔͨΊɺॊೈʹ࣮ߦ಺༰Λ੍ޚՄೳ
  4. sassc-railsͷ᠘ • DartSassʹ੾Γସ͑Δͱɺͦͷ··Ͱ͸@import͕ಈ͔ͳ͍Օॴ͕ଟʑ͋ͬͨ • @import “utilities/**” ͷΑ͏ͳglob → ϑΝΠϧΛͦΕͧΕ໌ࣔ͢Δ •

    xxx.scss.erb → ͖͋ΒΊ·͠ΐ͏ • admin-lte/dist/css/adminlte → admin-lte/dist/css/adminlte.css • ͜ΕΒ͸sassc-rails͕ॊೈʹॲཧͯ͘͠Ε͍ͯͨ 28 → Ϗϧυʹࣦഊ͢Δ৔߹͸ɺsassc-rails͕ॲཧͯ͘͠Ε͍ͯͳ͍͔ʁΛ֬ೝ