共通のSCSSファイルを外部ファイルで読み込みたい

概要

vueの場合はvueファイルでtemplate、script、css（scssとかも含む）を記載することができる。さらにcssはスコープでファイル内のみとそれ以外の制御ができる

やりたいこと

f:id:m_shige1979:20211106034610p:plain

参考

Vue CLI 3でグローバルなSCSSを読み込ませる - Qiita

Vue-cli3 でグローバルなCSSを読み込む - FULL STUCK DIARY

ソースコード準備

src/assets/scss/_prepends.scss

/**
 * 全体に適用するscss
 */
@import "./common";
@import "./font";

src/assets/scss/common.scss

* {
  margin: 0px;
  padding: 0px;
}

src/assets/scss/font.scss

* {
  font-size: 14px;
}

方法は２つあるとのこと

vue.config.jsにcssローダーを付与

module.exports = {
  devServer: {
    port: 5000,
    disableHostCheck: true,
  },
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "./src/assets/scss/_prepends.scss";`,
      },
    },
  },
};

※色々なサイトでは「prependData」ではなく、「data」になっていて「data」ではエラーになる・・・

main.js（main.ts）で読み込み

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
require("./assets/scss/_prepends.scss");  // ⇦ 追加

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