Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ViteでCSSのバージョン違いを作る
Search
NanimonoDemonai
April 18, 2024
0
30
ViteでCSSのバージョン違いを作る
Kyoto.js 20
https://kyotojs.connpass.com/event/296322/
NanimonoDemonai
April 18, 2024
Tweet
Share
More Decks by NanimonoDemonai
See All by NanimonoDemonai
はてなブログのブログ表示に必要なJSを1/6にした話
nanimonodemonai
0
730
はてなブログのESM化
nanimonodemonai
0
280
登壇資料.pdf
nanimonodemonai
0
290
はてなブログのフロントエンドに秩序はもたらされたのか
nanimonodemonai
3
5.6k
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
53
13k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Side Projects
sachag
452
42k
We Have a Design System, Now What?
morganepeng
51
7.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.5k
Statistics for Hackers
jakevdp
797
220k
YesSQL, Process and Tooling at Scale
rocio
171
14k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Writing Fast Ruby
sferik
628
61k
The Cult of Friendly URLs
andyhume
78
6.2k
Transcript
ViteͰCSSͷόʔδϣϯҧ͍Λ࡞Δ id: nanimono_demonai Kyoto.js #20
ࣗݾհ • nanimono_demoaniͰ͢ • ͯͳϒϩάͷWAE • WAE := Web Application
Engineer • ͓ͱͱ͍ࣗಈं໔ڐͱͬͨ 2
ࠓΓ͍ͨ͜ͱʂ • ViteͬͯελΠϧपΓͷ։ൃΛָʹ͢Δͧ • CSSͷLive ReloadΛ؆୯ʹ࣮ݱ͢Δํ๏Λհ • CSSͷόʔδϣϯҧ͍Λ࡞ΔͨΊͷΈΛհ 3
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>
DEMO • DEMOΛ͝ཡ͍ͩ͘͞ • 1༧ఆ 5
ผόʔδϣϯͷCSS͕࡞Γ͍ͨ • ͳͥʁ • ϑΟʔνϟʔϑϥά͝ͱʹCSSΛ࡞Γ͍͔ͨΒ • ։ൃதͷػೳ͕CSSͷΫϥε໊͔ΒόϨͨ͘ͳ͍͔Β • Ͳ͏࣮ͬͯݱ͢Δ •
αΫοͱRollupϓϥάΠϯ࡞Γ·͠ΐ͏ 6
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'; }
࣮ݱͷͨΊͷΞϓϩʔν • Vite͕෦తʹ͍ͬͯΔrollupͷϓϥάΠϯࣗ࡞Ͱ࣮ݱ • ϓϥάΠϯ͕Δ͜ͱ 8 1. Ϗϧυ࣌ʹదͳมΛՃͨ͠LessΛΈཱͯΔ 2. ͦͷLessͰग़͠Θ͚͍ͨ͠LessΛimport͢Δ
3. ग़͚͍ͨ͠LessΛϏϧυͷରʹ͢Δ
RollupϓϥάΠϯ֓ཁ • RollupͷϏϧυʹ͓͍ͯ͜ΕΒͷλΠϛϯάͰϓϥάΠϯΛݺͼग़ͤΔ 9 https://rollupjs.org/plugin-development/ • ࠓճoptionʹϓϥάΠϯΛॻ͘ • ༩͑ΒΕͨઃఆΛॻ͖͑Δ •
ॻ͖͍͑ͭͰʹҰ࣌ϑΝΠϧΛ࡞Δ
࣮ݱͰ͖ͯخ͔ͬͨ͜͠ͱ • CSSͷLive Reload͕ಈ͘ • CSSͷόʔδϣϯҧ͍Λ࡞Γ͍͢ • όʔδϣϯҧ͍Live Reload͕ಈ͘ •
σβΠφ͞Μ؆୯ʹ͑ΔΈ͕Ͱ͖ͯ࠷ߴʂ • ελΠϧγʔτͰใ౷੍͕Ͱ͖Δ • ։ൃதCSSΛίʔυωʔϜʹ͢Δඞཁͳ͠ 10
࣮ৄࡉ • DEMOϓϩδΣΫτͪ͜Β • https://github.com/NanimonoDemonai/nanimono-lt-demo-2023- kyoto-js 11