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.jsonのdependenciesに追加したパッケージ情報が追記されます。これにより、別の人にコードを共有した際にも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"
  },

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

間違いや改善の指摘

質問ポリシー①

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

Notion風メモツールを開発しながら、Vue.jsの基本構文と使いどころを学ぼう！

0章 : はじめに

1章 : VueCLIでプロジェクトを作成してみよう

2章 : 見た目を整えよう

3章 : Vueでできることを学んでみよう

4章 : ノートの作成／削除をしてみよう

5章 : ノートに親子関係を持たせてみよう

6章 : ウィジェット機能を作ってみよう

7章 : 機能を充実させよう

8章 : アプリをデプロイしよう

9章 : 付録

Sassの導入

事前準備

Sassのインストール

補足