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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
Avatar for NanimonoDemonai NanimonoDemonai
April 18, 2024
73

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

Avatar for NanimonoDemonai

NanimonoDemonai

April 18, 2024
Tweet

More Decks by NanimonoDemonai

Transcript

  1. 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>
  2. 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'; }
  3. ࣮ݱͰ͖ͯخ͔ͬͨ͜͠ͱ • CSSͷLive Reload͕ಈ͘ • CSSͷόʔδϣϯҧ͍Λ࡞Γ΍͍͢ • όʔδϣϯҧ͍΋Live Reload͕ಈ͘ •

    σβΠφ͞Μ΋؆୯ʹ࢖͑Δ࢓૊Έ͕Ͱ͖ͯ࠷ߴʂ • ελΠϧγʔτͰ΋৘ใ౷੍͕Ͱ͖Δ • ։ൃத͸CSSΛίʔυωʔϜʹ͢Δඞཁͳ͠ 10