vue cliのsass（scss）でglobを使ってインポートするためのメモ

#プロローグ

都内某所にてvue cliを使ってWEBアプリケーションを作っていると、唐突に神¹からの信託が下った。

「ん～…、CSSはBEMを使って書いてほしいんだなぁ～」²

私はその時何が起こったのか理解できなかった。

vueファイルってscoped使えるし、BEMで作るとテンプレートにclassたくさん書いて見づらくなるんでやらない方が良いと思うし、なんで必要なんですかね？と問いかけても明確な答えはなかった…。

globが欲しい

かつて、WEB制作会社（ブラック）で日夜働いていた時の私は、BEMに習いblockごとに作られたcssファイルを@importする作業に疲弊していた。
そんなときにsassでglobするgulpの設定を知った際には、初めてアッパー昇竜拳³が打てた時以来の感動がありました。

vue cliのsass（scss）でglobを使ってインポートする

そんなわけで、かなり需要が無いと思われるvue-cliでglobの方法です。

vue cliのsassはwebpackを使っていますので、node-sass-glob-importerをインストールします。

npm i node-sass-glob-importer

ポイントは、dart-sassもnode-sassのnode-sass-glob-importerで大丈夫なところです。⁴
dart-sass用の物をひたすら探し回ったのですが、これでOKだった…。

次に、vue.config.jsへnode-sass-glob-importerの設定を書き込みます。

const globImporter = require('node-sass-glob-importer')

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        sassOptions: {
          importer: globImporter()
        }
      }
    }
  }
}

なんとこれでvue-cliでもglobがつかえるようになります。

これが

@import './block/_aaa.scss';
@import './block/_bbb.scss';
@import './block/_ccc.scss';
@import './block/_ddd.scss';

こうなる

@import './block/**/*.scss';

便利！

---

• この記事の物語はフィクションです
• この記事を書いた人間はBEMが好きではないみたいなので、BEM LOVE!!!な人にはごめんなさいと言っておきます。

1. 三波春夫でございます ↩

2. 空の色は紫がいいんだなぁ～ ↩

3. 個人差があります。人によっては崩撃雲身双虎掌…（ry ↩

4. このnodeとは何のnodeなのだろうか？ ↩