Vue.jsでグローバルなCSSを読み込む

Vue.jsでグローバルなCSSを読み込む方法です。
Vue.jsのバージョンは 3.2.31 で確認しています。

main.tsファイルから読み込む

まずはグローバルに読み込みたいCSSファイルを用意します。

src/assets/style/common.css

/* 下記は例です */
.hoge {
  background-color: red;
}

main.ts ファイルでインポートします。

src/main.ts

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './assets/style/common.css'; // ここを追加

createApp(App).use(store).use(router).mount('#app');

これでコンポーネント内で .hoge クラスが使用可能になります。

sass-loaderから読み込む

sass-loaderでSCSSを使用する場合は、additionalData を設定することでグローバルなSCSSを読み込むことができます。

sass-loaderのv11.0.0以降はwebpackのバージョン5以上しか対応していないようです。
まずはwebpackのバージョンを確認して、バージョン5以下の場合はsass-loaderのv10をインストールしましょう。

# webpackのバージョンを確認
npm list webpack

# sass-loaderのv10をインストール
npm install --save-dev sass sass-loader@10

グローバルに読み込みたいSCSSファイルを用意します。

src/assets/scss/common.scss

/* 下記は例です */
.hoge {
  background-color: red;
}

プロジェクト直下の vue.config.js ファイルに下記設定を追加します。
ファイルがない場合は作成します。

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData:
          `@import "@/assets/scss/common.scss";`
      }
    },
  },
};

これでコンポーネント内で .hoge クラスが使用可能になります。

ちなみに、複数ファイルを読み込みたい場合は下記のようにします。

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData:
          `@import "@/assets/scss/common.scss"; \
          @import "@/assets/scss/variables.scss"; \
          @import "@/assets/scss/mixin.scss";`
      }
    },
  },
};