Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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
110
0

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

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

Avatar for NanimonoDemonai

NanimonoDemonai

April 18, 2024

More Decks by NanimonoDemonai

See All by NanimonoDemonai
LLMを「機能」として組み込む技術：「Figma to はてなCMS」におけるプロンプトエンジニアリングからAIエージェント構築にわたる精度向上の軌跡
Avatar for NanimonoDemonai nanimonodemonai
0
610
はてなCMSでFigmaを取り込むシステムに使われている技術
Avatar for NanimonoDemonai nanimonodemonai
0
160
はてなCMSのアーキテクチャ; 巨大な既存システムと共存して最新技術を取り入れる
Avatar for NanimonoDemonai nanimonodemonai
0
840
はてなブログのブログ表示に必要なJSを1/6にした話
Avatar for NanimonoDemonai nanimonodemonai
0
1k
はてなブログのESM化
Avatar for NanimonoDemonai nanimonodemonai
0
430
登壇資料.pdf
Avatar for NanimonoDemonai nanimonodemonai
0
450
はてなブログのフロントエンドに秩序はもたらされたのか
Avatar for NanimonoDemonai nanimonodemonai
3
6.2k

Featured

See All Featured
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
1
410
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.9k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
4
510
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
3k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
280
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
10
36k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.8k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
23k

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