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

article-thumbnail

こんにちは、お読みいただきありがとうございます。 ケン(@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.js
Sass Vue.js