Vue3でプロジェクト作成 SCSSを使う

Vue2とVue3についてまとめ

まずVue2とVue3の違いをざっとおさらい

	Vue2	Vue3
リリース	2014年	2020年9月
プロジェクト作成ツール	Vue CLI	create-vue
プロジェクト実行環境	Webpack	Vite
TypeScriptサポート	非標準	標準
ステート管理機能	Vuex	Pinia
ユニットテストツール	Jest	Vitest

プロジェクト作成

プロジェクトを作成したいディレクトリで以下コマンドを実行

terminal

npm init vue@latest

続いてプロジェクト名やオプションを聞かれるので選択。今回は「portfolit_vue3」という名前でプロジェクト作成。
TypeScriptを使いたいかとかJSX記法使いたいかとか色々聞かれる。これは作生するプロジェクトによって変更してほしい。
今回自分はテストツール以外はYesにした。

terminal

✔ Project name: … portfolit_vue3
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

続いて指示された通り作成したプロジェクトに移動し、npmインストール、開発環境起動のコマンドを実行するとローカルサーバが立ち上がる

terminal

  cd portfolit_vue3
  npm install
  npm run dev

今回はSCSSを使いたいので一旦ローカルサーバは閉じて続いて以下コマンドを入力

terminal

npm i -D sass

main.cssの拡張子をmain.scssにする
main.tsでimportしているCSSの拡張子をSCSSにする
各vueファイルではlang="scss"　にして記述すればSCSSが使用できる

main.ts

import "./assets/main.scss";

各vueファイルのstyle記述部分

<style lang="scss" scope>

今後global変数などの設定の仕方も残していきたい。。今回はここまで。

参考

Vue 3　フロントエンド開発の教科書
Vue3でSCSSの変数を呼び出して使う方法
vue3の新規アプリ（プロジェクト）を create-vue コマンドで作成する。scssを使用する