ViteでCSSのバージョン違いを作る

Kyoto.js 20
https://kyotojs.connpass.com/event/296322/

Transcript

1. ViteͰCSSͷόʔδϣϯҧ͍Λ࡞Δ id: nanimono_demonai Kyoto.js #20
2. ࣗݾ঺հ • nanimono_demoaniͰ͢ • ͸ͯͳϒϩάͷWAE • WAE := Web Application Engineer • ͓ͱͱ͍ࣗಈं໔ڐͱͬͨ 2
3. ࠓ೔΍Γ͍ͨ͜ͱʂ • Vite࢖ͬͯελΠϧपΓͷ։ൃΛָʹ͢Δͧ • CSSͷLive ReloadΛ؆୯ʹ࣮ݱ͢Δํ๏Λ঺հ • CSSͷόʔδϣϯҧ͍Λ࡞ΔͨΊͷ࢓૊ΈΛ঺հ 3
4. ViteΛ࢖ͬͨCSSͷϥΠϒϦϩʔυ͢Δํ๏ • ͜ͷೋͭͷλάΛHTMLʹ௥Ճ͢Δ͚ͩͰOK • ͜͜Ͱ঺հͨͥ͠ • https://qiita.com/NanimonoDaemon/items/920e56b2e995396aac0e 4 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title < / title> <script type="module" src="http: / / localhost:5173/@vite/client"> < / script> <link rel="stylesheet" href=“http: / / localhost:5173/less/hoge.less"> < / head> <body> <content> <h1>ςετ < / h1> <p class="hoge">hogehoge < / p> <p class="piyo">piyopiyo < / p> < / content> < / body> < / html>
5. DEMO • DEMOΛ͝ཡ͍ͩ͘͞ • 1෼༧ఆ 5
6. ผόʔδϣϯͷCSS͕࡞Γ͍ͨ • ͳͥʁ • ϑΟʔνϟʔϑϥά͝ͱʹCSSΛ࡞Γ͍͔ͨΒ • ։ൃதͷػೳ͕CSSͷΫϥε໊͔ΒόϨͨ͘ͳ͍͔Β • Ͳ͏΍࣮ͬͯݱ͢Δ • αΫοͱRollupϓϥάΠϯ࡞Γ·͠ΐ͏ 6
7. CSSͷग़͠Θ͚ͷΠϝʔδ • ελΠϧγʔτʹIFจΛॻ͍ͯɺϏϧυ࣌ʹ͚ͭͨΓͱͬͺΒͨΓ͢Δ 7 & when not (isdef i ned(@secretProject2023)) { border - color: @border; } & when (isdef i ned(@secretProject2023)) { border: none; } & when (isdef i ned(@secretProject2023)) { @import 'editor/TopSecretModule/_form'; }
8. ࣮ݱͷͨΊͷΞϓϩʔν • Vite͕಺෦తʹ࢖͍ͬͯΔrollupͷϓϥάΠϯࣗ࡞Ͱ࣮ݱ • ϓϥάΠϯ͕΍Δ͜ͱ 8 1. Ϗϧυ࣌ʹద੾ͳม਺Λ௥Ճͨ͠LessΛ૊ΈཱͯΔ 2. ͦͷLessͰग़͠Θ͚͍ͨ͠LessΛimport͢Δ 3. ग़͠෼͚͍ͨLessΛϏϧυͷର৅ʹ͢Δ
9. RollupϓϥάΠϯ֓ཁ • RollupͷϏϧυʹ͓͍ͯ͜ΕΒͷλΠϛϯάͰϓϥάΠϯΛݺͼग़ͤΔ 9 https://rollupjs.org/plugin-development/ • ࠓճ͸optionʹϓϥάΠϯΛॻ͘ • ༩͑ΒΕͨઃఆΛॻ͖׵͑Δ • ॻ͖׵͍͑ͭͰʹҰ࣌ϑΝΠϧΛ࡞Δ
10. ࣮ݱͰ͖ͯخ͔ͬͨ͜͠ͱ • CSSͷLive Reload͕ಈ͘ • CSSͷόʔδϣϯҧ͍Λ࡞Γ΍͍͢ • όʔδϣϯҧ͍΋Live Reload͕ಈ͘ • σβΠφ͞Μ΋؆୯ʹ࢖͑Δ࢓૊Έ͕Ͱ͖ͯ࠷ߴʂ • ελΠϧγʔτͰ΋৘ใ౷੍͕Ͱ͖Δ • ։ൃத͸CSSΛίʔυωʔϜʹ͢Δඞཁͳ͠ 10
11. ࣮૷ৄࡉ • DEMOϓϩδΣΫτ͸ͪ͜Β • https://github.com/NanimonoDemonai/nanimono-lt-demo-2023- kyoto-js 11