Vue.js, SCSS を設定する
Vue.js とは
Vue.js とは､ Web アプリケーションにおける UI を構築するための JavaScript フレームワークです｡
部分的に導入することも容易ですが､一方で SPA(シングルページアプリケーション) を構築することも可能です｡
公式ドキュメントが充実していて､大抵の場合はドキュメントを読めば解決できます(日本語化されています)｡
極々簡単なチュートリアル動画を紹介します
がんばらない Vue.js 〜 Visual Studio Code + TypeScript でクールに Vue.js の開発をしよう!
SCSS とは
SCSS は Sass の一種です｡
Sass とは､ CSS を効率的に､プログラミング言語ライクに記述できるメタ言語です｡
構文が2つあり､ファイル拡張子によって記述方法が変わります｡
- .sass → インデント構文
- .scss → ブロック構文
どちらが優れているということは無いですが､より CSS との親和性が高い SCSS を採用する企業が多い印象です｡
弊社でも､ SCSS を採用しています｡
Vue を試す
任意の Blade ファイルに､以下の要素を追加してください｡
<div id="app">
<h1>@{{ message }}</h1>
<div class="list">
<ul>
<li class="black">list</li>
<li class="white">list</li>
<li class="black">list</li>
<li class="white">list</li>
</ul>
</div>
<div>
<span>@{{ this.count }}</span>
<input type="button" @click="counter" value="click">
</div>
</div>
そして､ resources/js/app.js に以下を追加します｡
const app = new Vue({
el: '#app',
data: {
message: 'Hello world!',
count: 0;
},
methods: {
counter: function () {
this.count++;
}
},
})
ビルドします｡
$ npm run dev
対象ページを開くと､ Hello world! と表示され､ ボタンをクリックすると数値がカウントアップされます｡
SCSS を試す
resources/sass/hello.scss を新規作成し､以下を追加してください｡
#app {
h1 {
color: #581845;
}
.list {
background-color: #f2f2f2;
padding: 10px;
.black {
color: white;
background-color: black;
}
.white {
color: black;
background-color: white;
}
}
}
ビルドします｡
$ npm run dev
Vue を試すで記述した Blade ファイルの <head></head> 内に以下を追加してください｡
<link href="{{ mix('css/hello.css') }}" rel="stylesheet">
タイトル部やリスト部のスタイルが変更されているはずです｡
その他の書き方については､サンプルを用意したのでそちらを参照してください｡
サンプル