webpack2でfont-awesomeのscssが使えなかった→できた！

webpack2でfont-awesomeのscssが使えなかった

仕組み的に、そうなんだろう......でも、やりたいことができないのがつらい。

→(2017-05-11追記)やっぱり回避策があった！そうよね。困るもんね。sass-loaderのところにも書いてあったよ......
　「resolve-url-loaderをかます」＆「?sourceMap指定をする」必要があるらしい。

//変更前
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader'],
//変更後
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader?sourceMap'],

(追記ここまで)

やりたいこと

・いろいろな、スタイルシートをscssでいろいろ変えたい！

ということで、こんな構成でやってみる。

app.scss

/* ~ではいじめるとnode_modulesから引っ張ってこれる */
@import "~font-awesome/scss/font-awesome.scss"

ディレクトリ構成

+src/
  +css/app.scss
  +js/app.js
+node_modules/
  +font-awesome/
    +scss/
      +font-awesome.scss
    +fonts/
      +fontawesome-webfont.xxx

webpack.config.js

module.exports = {
  context: __dirname + '/src',
  entry: {
    'app': './js/my.js',
  },
  output: {
    path: __dirname + '/public/js',
    filename: '[name].js'
  },
  module: {
    loaders: [
      { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        loader: 'babel-loader', 
        query:{
          presets: ['es2017']
        }
      }, {
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader'],
      }, {
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader'],
      }, {
        test: /\.(otf|eot|svg|ttf|woff|woff2)(\?.+)?$/,
        loader: 'file-loader?name=[name].[ext]',
      }
    ]
  }
};

結果

そうね。そんなところにはないからね......

ERROR in ../~/css-loader!../~/sass-loader/lib/loader.js!./css/my.sass
Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.svg?v=4.7.0' in 'C:\projects\webapp\src\css'
 @ ../~/css-loader!../~/sass-loader/lib/loader.js!./css/stylesheet.sass 6:759-810
 @ ./css/stylesheet.sass
 @ ./js/app.js

原因

• css-loader(sass-loader)では、requireされたファイルからの相対パスとして扱う。
• css-loader(sass-loader)では、importされたcss・sassファイルをその中にフラットに展開する。

このため、今回の場合は、src/css/my.sassからたどったので、たとえnode_modulesから引っ張ってきても、src/css/からの相対パスとして扱う。

対策

1. jsからrequireする。
2. fontsを適切なディレクトリ(src/fonts)にコピーしておく。

でも、

1. まとめて一気に指定とか、参照とかしたいのに、できない。
2. そうなの？？？node_modulesでそのまま使えるのがいいんじゃないの？？？

感想

仕様的には当然の結果。であろう。でも、不便じゃない？？？
まあ、ここまで納得するまで、いろいろはまったんだけど、どうも回避できない。
font-awesome用のloaderを作るとか？でも、ほかのnode_modules経由でも同じことよね。
resolve.moduleとかmodule.aliasも効いてくれないみたい。

どうにかならんか？とソースも見てみたけど、何やら異様に凝っててよくわからない......