【アプリ作り：Step1】Monaca+Vue+Sassの開発環境構築

前置き

息抜きと勉強を兼ねて、自分がほしいなと思うアプリを作ろうと思います。
今回はStep1として、Monaca+Vue+SCSSの開発環境構築方法についてメモです。
前提としてMonacaにログインしているとします。

手順１:Monaca+Vue導入

1.新しいプロジェクトを作成し、テンプレートの種類を選択

2.フレームワークを選択

３.お好きなテンプレートを選択

4.プロジェクト情報を記入

5.作成を確認

6.ローカルの開発環境構築

cd [プロジェクトを作りたい場所]
npm i -g monaca
monaca login //←コマンド押下後、monacaのログイン情報を入力
monaca import
monaca preview

手順2:Sassのインストール

以下のコマンドを押下し、Sassをインストール

npm install node-sass nodemon --save-dev

src配下に、scssディレクトリを追加。
（※src配下の全体構成は以下キャプチャ参照）

package.jsonを修正

package.json

"scripts": {
    "monaca:preview": "npm run dev & npm run watch",
    "monaca:transpile": "npm run build",
    "monaca:debug": "npm run watch",
    "dev": "cross-env NODE_ENV=development vite",
    "watch": "cross-env NODE_ENV=development vite build --watch", //←★修正対象
    "build": "cross-env NODE_ENV=production vite build", //←★修正対象
    "postinstall": "cpy ./node_modules/framework7-icons/fonts/*.* ./src/fonts/ && cpy ./node_modules/material-icons/iconfont/*.* ./src/fonts/",
    "compile": "node-sass src/scss/style.scss src/css/style.css" //←★修正対象
},

手順3:ビルド

npm run compile
npm run build
monaca preview