スタイルをめちゃくちゃ楽に書けるようにするSass。
この記事では、こんな風にVueでSassを使うための手順を紹介していきます。
<template>
<div class="app__container">
<h1>タイトル</h1>
</div>
</template>
<style lang="sass">
.app__container
width: 50%
</style>
前提条件
- Vue/Cli 3で環境構築済み
コマンドラインでvue -Vを実行して3.xと出ればOKです。
Sassを使うための手順
Sassを使うためには2つパッケージをインストールすればいいのですが、Vue/Cliのバージョンによって、インストールするバージョンを変更する必要があります。なのでその点に注意してください。
バージョンさえ合っていればすぐに使えるようになります。
①node-sassのインストール
node-sassはバージョンしなければ7がインストールされますが、7だとエラーが起きるため6にダウングレードする必要があります。
npm install node-sass@6.x
②sass-loaderのインストール
sass-loaderも同じく、11以上のバージョンだとエラーが起きるため、10にバージョン指定しています。
npm install sass-loader@10.x
Sassを使ってみる！
これでページトップのように style にlang="sass"を追加すればこれで使えるようになるはずです。
もし使えない場合は（無いとは思いますが）
- バージョンが合っているか確認
- 余計なパッケージをインストールしていないか確認
こちらを試してみてください。
参考
- https://stackoverflow.com/questions/66082397/typeerror-this-getoptions-is-not-a-function
- https://www.npmjs.com/package/sass-loader
おまけ
ついでなのでCSSとSassを自動で変換してくれるツールがこちらです。
CSS 2 SASS/SCSS CONVERTER