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
45
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
はてなCMSのアーキテクチャ; 巨大な既存システムと共存して最新技術を取り入れる
nanimonodemonai
0
570
はてなブログのブログ表示に必要なJSを1/6にした話
nanimonodemonai
0
810
はてなブログのESM化
nanimonodemonai
0
320
登壇資料.pdf
nanimonodemonai
0
330
はてなブログのフロントエンドに秩序はもたらされたのか
nanimonodemonai
3
5.7k
Featured
See All Featured
How to Ace a Technical Interview
jacobian
277
23k
Building Applications with DynamoDB
mza
95
6.5k
Documentation Writing (for coders)
carmenintech
72
4.9k
We Have a Design System, Now What?
morganepeng
53
7.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Automating Front-end Workflow
addyosmani
1370
200k
Balancing Empowerment & Direction
lara
1
420
Music & Morning Musume
bryan
46
6.6k
What's in a price? How to price your products and services
michaelherold
246
12k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
A better future with KSS
kneath
239
17k
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