カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

2-6

Sassの導入

続いて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 を同時押し

入力した結果、コマンド入力を受け付け可能を示す >$ が表示されれば停止成功です。

Sassのインストール

それでは早速インストールを行っていきましょう。プロジェクトフォルダ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.jsondependenciesに追加したパッケージ情報が追記されます。これにより、別の人にコードを共有した際にもdependenciesの情報から、「このプロジェクトではこのパッケージが必要だな」ということを読み取り、同一のパッケージをインストールすることができるようになります。

package.json
1234567
+++
Copied!
"dependencies": { "core-js": "^3.6.5", "fibers": "^5.0.0", "sass": "^1.38.2", "sass-loader": "^10.2.0", "vue": "^2.6.11" },

個人開発時にはそこまで気にしなくて良い内容なのですが、チーム開発時には是非思い出していただければと思います。