PengNote

勉強した事や行った場所の感想を書くブログ

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

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

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

@import "object/project/*";

環境

webpack: v1.14.0

sass-loader: v4.1.1

import-glob-loader: v1.1.0

sass-loaderが対応していない

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

参考: Support for globbed imports? · Issue #151 · jtangelder/sass-loader

import-glob-loaderで対応する

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

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

import-glob-loader

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

TrySound/postcss-easy-import: PostCSS plugin to inline @import rules content with extra features

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はもう少し調べたほうが良さそうだなと感じました…。