vue/cli 4.x での Sass 導入まとめ

はじめに

vue/cli 4.x で Sass を導入する機会があったので、備忘録としてまとめておこうと思います。

開発環境について

• @vue/cli: 4.5.4
• node-sass: 5.0.0
• sass-loader: 10.1.0

ファイル構成について

vue create [プロジェクト名]コマンドを利用してベースとなるプロジェクトを作成しています。

ファイルの中身について

_variables.scss

// 共通スタイル定義
// いわゆるグローバル変数のようなもので、各scssファイルでインポートする
$base-font-size: 16px;

index.scss

// 個別スタイル定義
// _variables.scss の $base-font-size を参照している
.test- {
  &msg- {
    &hoge1 {
      color: #f00;
      font-size: $base-font-size;
    }
    &hoge2 {
      color: #00f;
      font-size: $base-font-size;
    }
  }
}

App.vue

<template>
  <HogeComponent1 msg="Hoge1" />
  <HogeComponent2 msg="Hoge2" />
</template>

<script>
import HogeComponent1 from "./components/HogeComponent1";
import HogeComponent2 from "./components/HogeComponent2";

export default {
  name: "App",
  components: {
    HogeComponent1,
    HogeComponent2
  }
};
</script>

HogeComponent1.vue

<template>
  <div>
    <p class="test-msg-hoge1">{{ msg }}</p>
  </div>
</template>

<script>
export default {
  name: "HogeComponent1",
  props: {
    msg: String
  }
};
</script>

HogeComponent2.vue

<template>
  <div>
    <p class="test-msg-hoge2">{{ msg }}</p>
  </div>
</template>

<script>
export default {
  name: "HogeComponent2",
  props: {
    msg: String
  }
};
</script>

main.js

import { createApp } from "vue";
import App from "./App.vue";

// スタイル定義を取り込む
require("./assets/styles/index.scss");

createApp(App).mount("#app");

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "~@/assets/styles/_variables.scss";`
      }
    }
  }
}

工夫しているところ

_variables.scssを各 scss ファイルでインポートする手間を省くためにvue.config.jsを作成して、グローバルな scss ファイルのインポートを可能にしています。

index.scss

// 本来なら @import 文が必要になるがこれが不要になる！
// @import "./variables";

.test- {
  &msg- {
    &hoge1 {
      color: #f00;
      font-size: $base-font-size;
    }
    &hoge2 {
      color: #00f;
      font-size: $base-font-size;
    }
  }
}

今回はあくまで備忘録という位置づけのためindex.scssに全ての個別スタイル定義を記述しておりメリットを感じづらいかと思いますが、もしitems/index.scssやparts/index.scssやblock/index.scss等を作成して細かく管理していく場合は、各 scss ファイルにてインポートする手間が省けるためメリットが感じられると思います。（初見者のインポートし忘れを防ぐ、という側面もあるかと思います）

最後に

vue.config.jsについてですが、ネット上の記事ではadditionalDataではなくprependDataやdataで紹介されている記事をいくつか見かけました。今回のsass-loaderのバージョンだとadditionalDataが正解のようですが、今後のバージョンアップによって変更になる可能性があるため、エラーが出た場合は [公式ページ] (https://github.com/webpack-contrib/sass-loader) で確認されると良いかも知れません。

追記

vue.config.jsを編集した場合は再度npm run serveを行ってVueアプリケーションを再起動してください。そうしないとconfig情報が反映されません。これに気づくまで少々ハマってしまいました。。。