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
46
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
590
はてなブログのブログ表示に必要なJSを1/6にした話
nanimonodemonai
0
820
はてなブログのESM化
nanimonodemonai
0
320
登壇資料.pdf
nanimonodemonai
0
330
はてなブログのフロントエンドに秩序はもたらされたのか
nanimonodemonai
3
5.7k
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Thoughts on Productivity
jonyablonski
69
4.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Unsuck your backbone
ammeep
671
58k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Practical Orchestrator
shlominoach
189
11k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
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