VueでCSSモジュールを使った感想

Transcript

1. プロジェクトで CSSモジュールを 使った感想
2. 自己紹介 名前　zero 　本名:旭康史（あさひやすし） 所属　カラビナテクノロジー 仕事　フロントエンド 技術　React好き（vueも好き）。Docker好き。Golang好き。 他　　今期の覇権は「ひとりぼっちの◦◦生活」
3. ScopedParent.vue ScopedChild.vue <template> <div class="wrapper"> <h2>スコープドチャイルド</h2> </div> </template> <style scoped> .wrapper { background-color: lime; } </style> <template> <div class="wrapper"> <h2>スコープドペアレント</h2> <ScopedChild /> </div> </template> <style scoped> .wrapper { padding: 20px; background-color: lightcyan; } </style> <div data-v-4f362c8a class="wrapper"> <h2 data-v-4f362c8a>スコープドペアレント</h2> <div data-v-0dcdfa6c data-v-4f362c8a class="wrapper"> <h2 data-v-0dcdfa6c>スコープドチャイルド</h2> </div> </div> scopedは 普通に 競合する
4. ModuleParent.vue ModuleChild.vue <template> <div :class="$style.wrapper"> <h2>モジュールチャイルド</h2> </div> </template> <style module> .wrapper { background-color: lime; } </style> <template> <div :class="$style.wrapper"> <h2>モジュールペアレント</h2> <ModuleChild /> </div> </template> <style module> .wrapper { padding: 20px; background-color: lightcyan; } </style> moduleは いくぶん 安心 <div class="ModuleParent_wrapper_1qsYl"> <h2>モジュールペアレント</h2> <div class="ModuleChild_wrapper_1XBnr"> <h2>モジュールチャイルド</h2> </div> </div>
5. 親で定義した スタイルを 子に渡せる
6. <template> <div :class="$style.wrapper"> <p>親</p> <div :class="$style.container"> <FirstChild :pStyle="$style" /> <SecondChild :pStyle="$style" /> </div> </div> </template> <style module> .wrapper { padding: 10px; text-align: center; border: 1px solid indigo; } .container { display: flex; justify-content: space-around; } /* 子供用のスタイル */ .box { padding: 10px; background-color: lightgreen; } .text { text-decoration: underline; } </style> <template> <div :class="pStyle.box"> <h1 :class="pStyle.text">長男</h1> </div> </template> <template> <div :class="pStyle.box"> <h2 :class="pStyle.text">次男</h2> </div> </template> Parent.vue FirstChild.vue SecondChild.vue
7. moduleの嫌な所 ・いちいち $style って 　書くのがめんどくさい ・クラス名がやたらと長くなって見づらい ・バインドし忘れる（:を付け忘れる） ・webpackの設定によっては 　外部ライブラリのcssが崩れる。 ぶっちゃけデメリットのほうが大きい scopedの欠点は工夫次第でどうとでも出来る!!
8. ありがとうございました またVueのプロジェクトや るとしたらscopedで書きま す (´・ω・｀)