【Vue】Vue CLI 4.2.3にsassを導入する

2020 4/21

2020.04.21 2020.04.21

目的

Vue CLI 4.2.3にsassを導入しようと思い、導入から使い方までアウトプットしていきます。

（前提、環境）

mac
macOS Mojave 10.14.5
vue.js 2.6.11
Vue CLI 4.2.3
npm 6.14.4

公式

CSS with superpowers
https://sass-lang.com/

はじめに

SASSとは

Syntactically Awesome Style Sheetsの略称です。
めちゃくちゃ機能が拡張されたstyle sheetっていうことで慣れると通常のcssよりもはるかに便利です。
※使い方に関してはかなり長くなってしまうので別記事を書こうと思います。

SASSの中にも「SCSS記法」と「SASS記法」の2種類あり、僕は「SCSS記法」に慣れているのでそちらで書いていくことにします。

※違いはymlファイルのようにインデントで管理でき、{}の必要がないことが挙げられます。SASS記法の方がスッキリしますが、JavaScriptを書き慣れてしまい{}の方が個人的にみやすい身体になってしまったので・・・笑

導入

sass-loader node-sassをインストール

まずはnpmでパッケージを導入します。
こちらはwebpackなどでコンパイルする必要がありますが、Vue CLIに導入予定なので気にすることなくそのままぶち込んでいきます。

#ターミナル
npm install sass-loader node-sass
=>
~~~~(省略)
Testing binary
Binary is fine
+ sass-loader@8.0.2
+ node-sass@4.13.1
added 85 packages from 57 contributors, removed 3 packages and audited 26036 packages in 24.381s

44 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities</code></pre>
<p>と上記のように入ったらインストール完了です！</p>
<h3>単一ファイルコンポーネントのstyleタグにlang="scss"を追記</h3>
<p>ここは単純にコンポーネントのstyleタグにlang="scss"を追記するだけで使えるようになります。</p>
<pre><code><templete>
~~~~(省略)
</templete>
<script>
~~~~(省略)
</script>
<style lang="scss">
~~~~(省略)
</style>