webpackでディレクトリ内のSassファイルをワイルドカードで指定してコンパイルできるようにする

2017.2.12

以前webpackでsass-loaderを使ってSassのコンパイルを出来るようにしていました。

その中で以下のようにSassファイル側でディレクトリの中身のimportをかける指定を行っていたのですが、上手くコンパイル出来ないという問題にしばらくぶつかってました。

@import "object/project/*";

環境

webpack: v1.14.0

sass-loader: v4.1.1

import-glob-loader: v1.1.0

gulpでSassのコンパイルタスクを組んでいた時も起こっていたので、想像がついていたのですが、sass-loaderがnode-sassを使っているらしく、このモジュールがディレクトリ単位のimportに対応していないというのが原因でした。

issue内でも有りましたが、sass-loaderが対応する予定は無いらしく、別のloaderで対応する必要があるようです。

ここで使うのが以下のloaderで、SassやCSS, ECMASｃriptのimport周りの拡張をしてくれるloaderのようです。

ちなみに、PostCSSなら以下のモジュールで * (ワイルドカード)を使ったimportができるようになるみたいです。

npmのページではmoduleのpreloadersで指定するような書き方がされていました。

{
  module: {
    preloaders: [{
      test: /\.scss/,
      loader: 'import-glob-loader'
    }]
  }
}

そこで指定しても上手くできなかったため、それっぽいことをしていた人の記事やloaderの読み込み方を見ながら手探りでやっていたのですが、以下で出来ました。

loaders: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style', 'css!sass-loader!import-glob')
      }
    ]

CSSファイルをJSファイルではなくCSSファイルでほしかったので、extract-text-webpack-pluginを使っていますが、sass-loaderにつづいてimport-glob-loaderを繋げているのがポイントかなと思います。

webpack2でpreloaderが使えなくなるようなので、それを考えるとこうするのがいいのかも？

今回結構苦戦したので、ドキュメントはしっかり読んだ方がいいなというのと、webpackはもう少し調べたほうが良さそうだなと感じました…。