教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
続いてSassの導入を行っていきます。実はプロジェクト作成時に自動で設定を行うこともできるのですが、今回は手を動かしてインストールすることで、一連の流れを学んでいただければ幸いです。
今回はnpm install
というコマンドを利用してSass関連パッケージのインストールを行っていきます。まずはコマンドラインツール(Windows:コマンドプロンプト、Mac:ターミナル)を開いておきましょう。
インストールを行う際には一度開発サーバを停止する必要があります。コマンドラインツールで以下のような表示がされている場合、開発サーバが実行状態ですので停止を行ってください。
console Copied! DONE Compiled successfully in 1122ms 16:31:00
App running at:
- Local: http://localhost:8081/
- Network: http://localhost:8081/
Note that the development build is not optimized.
To create a production build, run npm run build.
実行中のコマンドの停止に関してはパート1-3でもご紹介しましたが、下記コマンドで停止を行うことができます。
Windows
Copied!Ctrl + C を同時押し
Mac
Copied!control + C を同時押し
入力した結果、コマンド入力を受け付け可能を示す >
や $
が表示されれば停止成功です。
それでは早速インストールを行っていきましょう。プロジェクトフォルダtechpit/vue-notion
を開いた状態で、下記コマンドを実行してください。
console Copied!$ npm install sass sass-loader@^10 fibers@5.0.0
実行後しばらく経ち、下記のようなメッセージが表示されればインストールが完了します。
console Copied!+ sass-loader@10.2.0
+ sass@1.43.4
+ fibers@5.0.0
added 10 packages from 10 contributors and audited 1332 packages in 18.818s
簡単ですがSassのインストールに関しては以上で終了となります。
npm install
を行うと、package.json
,package-lock.json
のdependencies
に追加したパッケージ情報が追記されます。これにより、別の人にコードを共有した際にもdependencies
の情報から、「このプロジェクトではこのパッケージが必要だな」ということを読み取り、同一のパッケージをインストールすることができるようになります。
package.json1234567 +++ Copied! "dependencies": {
"core-js": "^3.6.5",
"fibers": "^5.0.0",
"sass": "^1.38.2",
"sass-loader": "^10.2.0",
"vue": "^2.6.11"
},
個人開発時にはそこまで気にしなくて良い内容なのですが、チーム開発時には是非思い出していただければと思います。