プロローグ
都内某所にてvue cliを使ってWEBアプリケーションを作っていると、唐突に神1からの信託が下った。
「ん～…、CSSはBEMを使って書いてほしいんだなぁ～」2
私はその時何が起こったのか理解できなかった。
vueファイルってscoped使えるし、BEMで作るとテンプレートにclassたくさん書いて見づらくなるんでやらない方が良いと思うし、なんで必要なんですかね？と問いかけても明確な答えはなかった…。
globが欲しい
かつて、WEB制作会社（ブラック）で日夜働いていた時の私は、BEMに習いblockごとに作られたcssファイルを@importする作業に疲弊していた。
そんなときにsassでglobするgulpの設定を知った際には、初めてアッパー昇竜拳3が打てた時以来の感動がありました。
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で大丈夫なところです。4
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!!!な人にはごめんなさいと言っておきます。