BETA

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

投稿日:2018-11-13
最終更新:2018-11-13
※この記事は外部サイト(https://gootablog.com/vuejs-sass-globalvar...)からのクロス投稿です

ここ最近は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です。

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

参考になれば幸いです。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@goota'の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!