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

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

Avatar for NanimonoDemonai NanimonoDemonai
April 18, 2024
0
44

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

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

NanimonoDemonai

April 18, 2024
Tweet

More Decks by NanimonoDemonai

See All by NanimonoDemonai
はてなCMSのアーキテクチャ; 巨大な既存システムと共存して最新技術を取り入れる
Avatar for NanimonoDemonai nanimonodemonai
0
550
はてなブログのブログ表示に必要なJSを1/6にした話
Avatar for NanimonoDemonai nanimonodemonai
0
800
はてなブログのESM化
Avatar for NanimonoDemonai nanimonodemonai
0
310
登壇資料.pdf
Avatar for NanimonoDemonai nanimonodemonai
0
320
はてなブログのフロントエンドに秩序はもたらされたのか
Avatar for NanimonoDemonai nanimonodemonai
3
5.7k

Featured

See All Featured
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
657
60k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
172
14k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
16
910
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
299
21k
KATA
Avatar for Megan Lloyd mclloyd
29
14k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
45
7.3k
Visualization
Avatar for Eitan Lees eitanlees
146
16k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
693
190k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
52
7.6k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
233
17k

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