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

ViteͰCSSͷόʔδϣϯҧ͍Λ࡞Δ id: nanimono_demonai Kyoto.js #20

ࣗݾ঺հ • nanimono_demoaniͰ͢ • ͸ͯͳϒϩάͷWAE • WAE := Web Application
Engineer • ͓ͱͱ͍ࣗಈं໔ڐͱͬͨ 2

ࠓ೔΍Γ͍ͨ͜ͱʂ • Vite࢖ͬͯελΠϧपΓͷ։ൃΛָʹ͢Δͧ • CSSͷLive ReloadΛ؆୯ʹ࣮ݱ͢Δํ๏Λ঺հ • CSSͷόʔδϣϯҧ͍Λ࡞ΔͨΊͷ࢓૊ΈΛ঺հ 3

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>

DEMO • DEMOΛ͝ཡ͍ͩ͘͞ • 1෼༧ఆ 5

ผόʔδϣϯͷCSS͕࡞Γ͍ͨ • ͳͥʁ • ϑΟʔνϟʔϑϥά͝ͱʹCSSΛ࡞Γ͍͔ͨΒ • ։ൃதͷػೳ͕CSSͷΫϥε໊͔ΒόϨͨ͘ͳ͍͔Β • Ͳ͏΍࣮ͬͯݱ͢Δ •
αΫοͱRollupϓϥάΠϯ࡞Γ·͠ΐ͏ 6

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'; }

࣮ݱͷͨΊͷΞϓϩʔν • Vite͕಺෦తʹ࢖͍ͬͯΔrollupͷϓϥάΠϯࣗ࡞Ͱ࣮ݱ • ϓϥάΠϯ͕΍Δ͜ͱ 8 1. Ϗϧυ࣌ʹద੾ͳม਺Λ௥Ճͨ͠LessΛ૊ΈཱͯΔ 2. ͦͷLessͰग़͠Θ͚͍ͨ͠LessΛimport͢Δ
3. ग़͠෼͚͍ͨLessΛϏϧυͷର৅ʹ͢Δ

RollupϓϥάΠϯ֓ཁ • RollupͷϏϧυʹ͓͍ͯ͜ΕΒͷλΠϛϯάͰϓϥάΠϯΛݺͼग़ͤΔ 9 https://rollupjs.org/plugin-development/ • ࠓճ͸optionʹϓϥάΠϯΛॻ͘ • ༩͑ΒΕͨઃఆΛॻ͖׵͑Δ •
ॻ͖׵͍͑ͭͰʹҰ࣌ϑΝΠϧΛ࡞Δ

࣮ݱͰ͖ͯخ͔ͬͨ͜͠ͱ • CSSͷLive Reload͕ಈ͘ • CSSͷόʔδϣϯҧ͍Λ࡞Γ΍͍͢ • όʔδϣϯҧ͍΋Live Reload͕ಈ͘ •
σβΠφ͞Μ΋؆୯ʹ࢖͑Δ࢓૊Έ͕Ͱ͖ͯ࠷ߴʂ • ελΠϧγʔτͰ΋৘ใ౷੍͕Ͱ͖Δ • ։ൃத͸CSSΛίʔυωʔϜʹ͢Δඞཁͳ͠ 10

࣮૷ৄࡉ • DEMOϓϩδΣΫτ͸ͪ͜Β • https://github.com/NanimonoDemonai/nanimono-lt-demo-2023- kyoto-js 11

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

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

NanimonoDemonai

More Decks by NanimonoDemonai

Featured

Transcript

ViteͰCSSͷόʔδϣϯҧ͍Λ࡞Δ id: nanimono_demonai Kyoto.js #20

ࣗݾ঺հ • nanimono_demoaniͰ͢ • ͸ͯͳϒϩάͷWAE • WAE := Web Application

ࠓ೔΍Γ͍ͨ͜ͱʂ • Vite࢖ͬͯελΠϧपΓͷ։ൃΛָʹ͢Δͧ • CSSͷLive ReloadΛ؆୯ʹ࣮ݱ͢Δํ๏Λ঺հ • CSSͷόʔδϣϯҧ͍Λ࡞ΔͨΊͷ࢓૊ΈΛ঺հ 3

ViteΛ࢖ͬͨCSSͷϥΠϒϦϩʔυ͢Δํ๏ • ͜ͷೋͭͷλάΛHTMLʹ௥Ճ͢Δ͚ͩͰOK • ͜͜Ͱ঺հͨͥ͠ • https://qiita.com/NanimonoDaemon/items/920e56b2e995396aac0e 4 <!DOCTYPE html>

DEMO • DEMOΛ͝ཡ͍ͩ͘͞ • 1෼༧ఆ 5

ผόʔδϣϯͷCSS͕࡞Γ͍ͨ • ͳͥʁ • ϑΟʔνϟʔϑϥά͝ͱʹCSSΛ࡞Γ͍͔ͨΒ • ։ൃதͷػೳ͕CSSͷΫϥε໊͔ΒόϨͨ͘ͳ͍͔Β • Ͳ͏΍࣮ͬͯݱ͢Δ •

CSSͷग़͠Θ͚ͷΠϝʔδ • ελΠϧγʔτʹIFจΛॻ͍ͯɺϏϧυ࣌ʹ͚ͭͨΓͱͬͺΒͨΓ͢Δ 7 & when not (isdef i ned(@secretProject2023))

࣮ݱͷͨΊͷΞϓϩʔν • Vite͕಺෦తʹ࢖͍ͬͯΔrollupͷϓϥάΠϯࣗ࡞Ͱ࣮ݱ • ϓϥάΠϯ͕΍Δ͜ͱ 8 1. Ϗϧυ࣌ʹద੾ͳม਺Λ௥Ճͨ͠LessΛ૊ΈཱͯΔ 2. ͦͷLessͰग़͠Θ͚͍ͨ͠LessΛimport͢Δ

RollupϓϥάΠϯ֓ཁ • RollupͷϏϧυʹ͓͍ͯ͜ΕΒͷλΠϛϯάͰϓϥάΠϯΛݺͼग़ͤΔ 9 https://rollupjs.org/plugin-development/ • ࠓճ͸optionʹϓϥάΠϯΛॻ͘ • ༩͑ΒΕͨઃఆΛॻ͖׵͑Δ •

࣮ݱͰ͖ͯخ͔ͬͨ͜͠ͱ • CSSͷLive Reload͕ಈ͘ • CSSͷόʔδϣϯҧ͍Λ࡞Γ΍͍͢ • όʔδϣϯҧ͍΋Live Reload͕ಈ͘ •

࣮૷ৄࡉ • DEMOϓϩδΣΫτ͸ͪ͜Β • https://github.com/NanimonoDemonai/nanimono-lt-demo-2023- kyoto-js 11