Vueで共通のSCSS(SASS)をwebpack(3系と4系)で読み込む方法

Vue.jsの単一ファイルコンポーネントで実装していると共通のSCSS(SASS)の読み込みに困りませんか?

変数やmixinなどどのファイルからも参照したいものってどんなアプリケーションでも必ずでてくると思います。

これまで共通部分の扱いに困っていましたが、sass-resources-loaderを使うことで、どのvueファイルからでも共通部分を使えることを知りました。

sass-resources-loaderを使ってVueで共通のSCSS(SASS)を使う方法を紹介します。

vueファイルから共通のSCSS(SASS)を使う設定

sass-resources-loaderはwebpackで使うことができるloaderの1つです。

shakacode/sass-resources-loader: SASS resources (e.g. variables, mixins etc.) loader for Webpack

webpack3系と4系ではvue-loaderと合わせてSASS(SCSS)を使う設定が異なります。

webpack3系の設定

webpack3系の設定ではvue-loaderで使うloaderにscssの項目を追加します

スタイル読み込み系のloaderと合わせてsass-resources-loaderと共通で使うscss(sass)ファイルを指定します。

下記コード内のresourcesの配列が共通で読み込むファイル名を指定する項目です。

use: [
  {
    loader: 'vue-loader',
    options: {
      loaders: {
        scss: [
          'style-loader',
          'css-loader',
          'sass-loader',
          {
            loader: 'sass-resources-loader',
            options: {
              resources: [
                path.resolve(__dirname, 'src/styles/_variables.scss'),
                path.resolve(__dirname, 'src/styles/_mixins.scss')
              ]
            }
          }
        ]
      }
    }
  }
]

webpack4系の設定

webpack4系でSCSS(SASS)を使うにはvue-loaderとは別のオブジェクトで、scssの設定を記述します。

vueでscssを使う方法はは「webpack4でVueとSCSSをコンパイルする方法が変更になった」で書いたので、合わせて読んでみてください。

sass-resources-loaderの使い方自体はwebpack3系と同じです。

module: {
  rules: [
    {
      test: /\.vue?$/,
      loader: 'vue-loader'
    },
    {
      test: /\.scss$/,
      use: [
        'css-loader',
        'sass-loader',
        {
          loader: 'sass-resources-loader',
          options: {
            resources: [
              path.resolve(__dirname, 'src/client/styles/_variables.scss')
            ]
          }
        }
      ]
    }
  ]
}

vueファイルからSCSS(SASS)の共通コードを使う

上記のwebpackの設定を行うとresourcesで指定したファイルに書かれたコードを使うことができます。

例えば共通読みこみのファイルで

$main-color: #ff0000;

という変数が定義してあると下記のようにvueファイル内で使用しても、正しくコンパイルされます。

<template>
  <div class="message">Hello World<div>
</template>

<script>
// Vueのコード
</script>

<style lang="scss">
.message {
  color: $main-color;
}
</style>

sass-resources-loaderを使えばメンテナンス性と安全性アップ

これまでvueファイル内から共通の変数やmixinを使うのは厳しいと思っていましたが、sass-resources-loaderを使うようになって開発スタイルが大きく変わりました。

コンポーネント固有のスタイルはscopedをつけてカプセル化して、すべてvueファイル内に記述するとスタイルの干渉のリスクも減らすことができます。

共通変数はSCSS(SASS)で管理でき、コンポーネントによって値が変わることもなくりました。

この記事を書いた人

コウジ

TypeScriptとVue.jsが好きなフリーランスのフロントエンドエンジニアです。
フロントのHTML・CSS・JavaScriptの設計実装をメインに、RubyとNodeでサーバーサイドやってたりもします。

Web開発の仕事依頼

フリーランスのエンジニアとしてWeb開発の仕事をお引き受けしています。

依頼の検討をしていただきます際はポートフォリオサイトの事業・実績ページをご覧いただき、お問い合わせよりメールや各種SNSよりご連絡ください。

仕事の相談をする
基礎から学ぶ Vue.js