【Vue.js】初心者のワタシがつまづいた。Sassの共通変数をグローバルに読み込む方法

Warning: Undefined variable $_cat_enginieer_flag in /home/growgroup/online-study.jp/public_html/wp-content/themes/online-study-wp/views/object/components/related-posts-inline.php on line 37

【Vue.js】初心者のワタシがつまづいた。Sassの共通変数をグローバルに読み込む方法

【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

いまさらながら Vue.js 面白い！

一人でほそぼそと Vue.js を学んでいる小野です。

今日は Vue.js を利用する際につまづいた Sass のグローバルな読み込みについて備忘録がてら報告します。

vue-cli 3.x でグローバルな Sass を利用する

Vue.js で Sass を利用する際に、サイト内で共通で使用する変数や Mixin を毎回インポートするのは面倒ですよね。

例えば以下のコードで利用する $color-primary 変数を他のコンポーネントでも使いたい！

というケースを考えてみます。

<template>
  <div class="c-component"> テキストテキストテキストテキストテキスト</div>
</template>

<style scoped lang="scss">
$color-primary: #aabbcc;
.c-component {
 background: $color-primary; 
}
</style>

共通する Sass 変数や Mixin を読み込みしたいときは変数用の Sass ファイルを作成してインポートする方法があります。

<style lang="scss">
@import "./scss/_variables.scss";
.c-component {
  background: $color-primary;
}
</style>

でもたくさんコンポーネントがあったらこれはしんどいですね。

Vue.js では package.json と同じフォルダに vue.config.js を作成することで、グローバルな Sass のインポートが可能です。

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/scss/_variables.scss";`
      }
    }
  }
};

インターネット上の記事では prependData の部分を単に data として紹介されていることが多いのですが、data だと以下のようなエラーが出てコンパイルできませんでした。

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does
 not match the API schema.
 - options has an unknown property 'data'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }

公式 sass-loader のドキュメントを見ると prependData が正解っぽいです。めっちゃ悩んだ。。。

https://github.com/webpack-contrib/sass-loader

一連の流れをまとめてみる

まずコマンドラインでプロジェクトを作成する。

npm install -g vue-cli
vue create my-project
cd my-project

次に SassLoader をインストール

npm install --save-dev node-sass sass-loader

次に vue.config.js を作成する。

vi vue.config.js

vue.config.js にグローバルで利用する SCSS を指定する

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/scss/_variables.scss";
        `
      }
    }
  }
};

これで変数が定義されたSassファイルが各コンポーネントから利用できる。やった！