Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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

Avatar for NanimonoDemonai NanimonoDemonai
April 18, 2024
0
64

 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でFigmaを取り込むシステムに使われている技術
Avatar for NanimonoDemonai nanimonodemonai
0
59
はてなCMSのアーキテクチャ; 巨大な既存システムと共存して最新技術を取り入れる
Avatar for NanimonoDemonai nanimonodemonai
0
680
はてなブログのブログ表示に必要なJSを1/6にした話
Avatar for NanimonoDemonai nanimonodemonai
0
880
はてなブログのESM化
Avatar for NanimonoDemonai nanimonodemonai
0
360
登壇資料.pdf
Avatar for NanimonoDemonai nanimonodemonai
0
360
はてなブログのフロントエンドに秩序はもたらされたのか
Avatar for NanimonoDemonai nanimonodemonai
3
5.9k

Featured

See All Featured
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.1k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.3k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
3k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
It's Worth the Effort
Avatar for 3n 3n
187
29k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
39k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
37
2.6k

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