Vue CLIで共通のSCSSファイルを読み込む方法

リセットCSSフレームワークなどを使用したい場合は、yarnやnpmでインストールになりますが、今回は自分で.scssファイルを作成して、コンパイルして読み込ませる方法をまとめておきます（本来はVue.jsをせっかく使うなら、共通のCSSは使わない方がいいと言われていますが…）。

前提として、Vue CLIのセットアップ時に「CSS Pre-processors」で「Sass/SCSS」を選択している必要があります。

Webrandum

Vue CLIでVue.jsの開発環境をセットアップするまでの流れ

https://webrandum.net/vue-cli

今回はVue CLIを使って、Vue.jsの開発環境を作るまでの手順をメモしておきます。Vue CLIはVue.jsの開発環境を作ってくれる公式のコマンドラインツールVue CLIはVue.jsでアプリケーションを構築するときに、必要となるツールを簡単にセットアップしてくれる公式のコマンドラインツールです。これを使うことで、1から自分でインストールして回る必要がなくなり、プロジェクトの作成が簡単にできます。Vue CLIとYarnのグローバルインストールまずは必要となる「Vue CLI」のインストールと「Yarn（インストールしていない人）」をインスト...

SCSSファイルの作成

SCSSファイルはどこに作成してもいいのですが、とりあえず下記のパスにフォルダとファイルを作成しておきます。

/src/assets/scss/style.scss

作成ができたら読み込みをします。

共通のSCSSを読み込む方法

Vue CLIで共通のSCSSを読み込む方法は2つありますが、基本はmain.jsに記述を追加する方法のほうがラクそうです。

JavaScriptで読み込む方法

/src/main.jsに下記の1行を付け加えるだけです。
基本的に共通のSCSSを読み込みたい場合は、こちらの方法を使った方がよさそうです（記述も1行で済みます）。

require('@/src/assets/scss/style.scss')

Vueコンポーネントで読み込む方法

vue.config.jsに下記の記述を追加するだけです。

module.exports = {
  ## ↑他の設定省略
  css: {
    loaderOptions: {
      sass: {
        data: `@import "./src/assets/scss/style.scss";`
      }
    },
  },
  ## ↓他の設定省略
}

module.exportsは最初から記述されているので、何も設定していない場合はcss:から記述をすればOKです。