[Vue.js] 共通SCSSファイルをグローバルで読み込む方法：こまけぇこたぁいいんだよ ─ のんびりVue.js超入門［第9回］

posted : 2021.02.14

こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。

Vue.js、使ってますか？

ぼくは実務では使う機会があまりないですが、趣味でちょこちょこしょうもないWEBアプリを作るときにVueを使ったりしてるんで、今日はVue.jsの小ネタを。

共通変数などのSCSSファイルをグローバルで読み込みたい

変数などを定義したファイルって、すべてのコンポーネントから参照したいですよね。

というわけで共通変数などのSCSSファイルをグローバルで読み込む方法です。

編集するのは「vue.config.js」です。

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

@/assets/scss/variables.scss の部分は実際のディレクトリ構造と合わせてください。

ちなみに「@/～」というパスはどこからでも「src」ディレクトリをルートとしてパス取得できる書き方です。

ここは普通に「./src～」といった普通のパス指定でも大丈夫。

なんてことないですがdart-sassを使っている場合の記述も。

@importを@useにするだけ。

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `@use "@/assets/scss/variables.scss";`
      }
    },
  },
}

名前空間を持たせたい場合は、

prependData: `@use "@/assets/scss/variables.scss";`

の部分を

prependData: `@use "@/assets/scss/variables.scss" as hoge;`

としてやりましょう。

クオーテーションとかセミコロンの位置とか注意。

どなたかの参考になればこれ幸い。