How to2021.04.02

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

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

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

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

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

目次

vueファイルから共通のSCSS（SASS）を使う設定
1. webpack3系の設定
2. webpack4系の設定
vueファイルからSCSS（SASS）の共通コードを使う
sass-resources-loaderを使えばメンテナンス性と安全性アップ

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

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

https://github.com/shakacode/sass-resources-loader

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

webpack3系の設定

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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の設定を記述します。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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で指定したファイルに書かれたコードを使うことができます。

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

1
$main-color: #ff0000;

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<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）で管理でき、コンポーネントによって値が変わることもなくりました。