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

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

NanimonoDemonai
April 18, 2024
5

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

NanimonoDemonai

April 18, 2024
Tweet

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