Nuxt.js＋Vue.jsでSCSSを使う方法
公開日：
最終更新日：
私はWindows上で、Nuxt.js+Vue.jsで開発しています。
環境構築についてはこちらの記事を参照してください。
“sass”をインストールする
開発サーバーを起動している場合はCtrl+Cで停止させてください。
そして、以下のコマンドで”sass”をインストールしてください。
$ npm install -D sassコマンドの実行が終わったら、package.jsonを確認して、sassパッケージがインストールされていることを確認してください。
"dependencies": {
"nuxt": "^3.14.1592",
"vue": "latest",
"vue-router": "latest"
},
"devDependencies": {
"sass": "^1.82.0"
}こんな感じで”sass”: “バージョン”っていう記述が入っていれば、インストール出来ています。
Vue.js内でのSCSSの記述方法
.vueファイル内に記述するやり方では
<style scope>
ul.menu {
display: flex;
flex-direction: row;
}
ul.menu > li {
flex: 1;
}
</style>この記述を以下のように変更することで、実行時にSCSSからCSSに変換してくれます。
<style lang="scss" scope>
ul.menu {
display: flex;
flex-direction: row;
> li {
flex: 1;
}
}
</style>大事なのは<style lang=”scss”>の部分です。
これで記述内容がCSSではなく、SCSSですよ。って明示的にしているんです。
宣伝
WordPressサイトのテンプレート編集やトラブル対応、バグ修正、簡単なJavascriptの作成（カルーセルやバリデーション等）など、小規模なスポット対応を受け付けております。
もしお困りごとがありましたら、お問い合わせフォームよりご相談ください。
もしお困りごとがありましたら、お問い合わせフォームよりご相談ください。
