プロジェクトで CSSモジュールを 使った感想

自己紹介 名前　zero 　本名:旭康史（あさひやすし） 所属　カラビナテクノロジー 仕事　フロントエンド 技術　React好き（vueも好き）。Docker好き。Golang好き。 他　　今期の覇権は「ひとりぼっちの○○生活」

ScopedParent.vue ScopedChild.vue .wrapper { background-color: lime; } .wrapper { padding: 20px; background-color: lightcyan; } scopedは 普通に 競合する

ModuleParent.vue ModuleChild.vue .wrapper { background-color: lime; } .wrapper { padding: 20px; background-color: lightcyan; } 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; } Parent.vue FirstChild.vue SecondChild.vue

moduleの嫌な所 ・いちいち $style って 　書くのがめんどくさい ・クラス名がやたらと長くなって見づらい ・バインドし忘れる（:を付け忘れる） ・webpackの設定によっては 　外部ライブラリのcssが崩れる。 ぶっちゃけデメリットのほうが大きい scopedの欠点は工夫次第でどうとでも出来る!!

ありがとうございました またVueのプロジェクトや るとしたらscopedで書きま す (´・ω・｀)