Vue.jsでSassを使う時にグローバル変数を読み込む方法

こんにちは、お読みいただきありがとうございます。 ケン(@gootablog)です。

ここ最近はVue.jsを書いています。
スタイルのコーディングは変数や関数も作れて便利なSassを使うことが多いです。

SassをVue.jsで使うのは簡単ですが、変数などの扱いに困ってました。

最上位層のApp.vueにインポートするとスコープ使えないしどうしようと思ってましたが調べたらグローバルに設定できる方法があったので書いていきます。

Vue.jsのバージョンとディレクトリ構成

今回試してるVue.jsとwebpackのバージョンはこれ

"vue": "^2.5.17"
"webpack": "^3.6.0"

公式のvue-cliというコマンドラインインターフェースからvue init webpackを実行してプロジェクトを作っています。

sass-resources-loaderのインストール

まずはsass-resources-loaderというライブラリをインストール。

$ npm install sass-resources-loader

このライブラリはwebpackでコンパイルを行う時に、指定したSassファイルをSassで書かれいている部分に自動でインポートしてくれるライブラリです。

build/util.jsに追記するとVue.jsでSCSSのグローバル変数を使うことができる

build/util.jsというファイルの真ん中辺り（58行目）にこういう記述があります。

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
 }

ここにsass-resources-loaderの設定を追記します。

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/sass/_base.scss')
        }
      }),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

この部分resources: path.resolve(__dirname, '自分で書いたグローバル用のファイル名のパス')に自分で作成したファイル名のパスを書けばOKです。

これでグローバルに変数やミックスインが使用できます。

vue-cli@3.x で作成したvueプロジェクト（追記2019/07/06）

vue.config.jsというファイルを作成して、このように書いてます。

const path = require("path");

module.exports = {
  chainWebpack: config => {
    const oneOfsMap = config.module.rule("scss").oneOfs.store;
    oneOfsMap.forEach(item => {
      item
        .use("sass-resources-loader")
        .loader("sass-resources-loader")
        .options({
          resources: "./src/sass/_base.scss"
        })
        .end();
    });
  }
};

参考になれば幸いです。