---

CSSの話自体は大したことないと思って日記には取り上げない予定でいたのですが、そういえばVueでCSS書くためのお作法とかなんも知らんし、ハマりそうな予感がしたので(笑)日記のネタにしてやろうかと思います。
で、そのついでにSassを書けるようになろうということで導入していこうかなと思います。これに関しては記法自体はCSSに似てる(Scssを採用します)んで、そんなに障壁はないと思います。


やりたいこととしては、Vueのコンポーネントに直書きする、いわゆるscopedなCSSと、サイトデザインの統一感を図るためのグローバルなCSS、両方書けるようにしておこう、って感じですね。


んじゃやっていきましょう。まずはscoped CSSですね。
今回は、前回作ったフォームを、フォームとしてちゃんと整形しつつ、そのフォームの大きさなりデザインなりっていうのをコンポーネント内で記述します。特にここでしか使わないようなプロパティがほとんどになると思うので、コンポーネント内に書いた方が良さそうなので。

で、ついでにSassを取り入れましょうねと。これに関してはこことかこことか参考にしながら。
認識としては、基本的にはlang="scss"というプロパティをぶっこんだら書けるようになるって感じでよさそう。
ただ、Laravelってvue-cli使ってるんだっけ･･････？使ってないという認識で今までずっといたんだが、どうなんだろう？？？


で、ここで先に考えておかなくてはいけないのはスタイルのバッティングだと思います。
コンポーネント内でクラス名が解決すると思っていたのに、なんか外のコンポーネントに伝搬してる･･････ってのは最悪です。
基本的にはそれが起こらないよう、独自データ属性で管理されてるっぽいんですけど、バッティングするケースもいくつかあるみたいなので気をつけるべきですね。同じ名前使わなければいいじゃんって感じはしますけど、本来そういうのってコーディング時になるべく考えないほうがよさそうなので･･････。


雑に書いてるなうなんですけど、Scssってまじラクですね。入れ子で書けるってすばらしい。
とりあえず基本的には使い捨てクラスなので同じVueファイル内に書けばいいんですけど、汎用性が高そうなクラスは外に出して共通化したいところです。
しかしこれをどうやったら切り出すことが、つまりモジュールっぽくできるかってことですね。

まぁ簡単な手段としては一番大元となる親コンポーネントにscopeつけずにやればいいだけではあるんですが、ちょっと不格好なのでscssファイルを作りたいです(笑)
静的ファイルをhtml、つまりビュー側で読み込むという手もあるんですが、scss使えないのでこれはダメですね。


答えはやはりマニュアルに書いてありまして、LaravelMixを使うみたいですね。



僕はこんなふうに書き換えました。scssで書いたdefault.cssをpublic/cssにビルドしますよーっていう意味になります。
で、これを使いたいところで読み込めばいいわけです。今回はすべてのページで使うCSSを書いているつもりなので、welcome.blade.phpでふつうに読み込めばいいってことになりますね。


あぁこれはちょお便利である･･････かんたん･･････。



ってことで、Vueの基本的な扱い方はなんとなくわかってきた感してきましたね。あとは黙々と移植作業を続けるのみ･･････。
いまのtwitterアカウントとのシナジーが結構強いので、なるべく早く開発したいところですね。