[解決済み] WebpackでSCSS(SASS)を使って相対パスでfont-awesomeを読み込むにはどうしたらいいですか？

質問

node_modules フォルダに font-awesome があるので、それをメインの .scss ファイルにインポートしようとすると、このようになります。

@import "../../node_modules/font-awesome/scss/font-awesome.scss";

しかし、Webpack のバンドルコンパイルは失敗し、次のように表示されます。

Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot 

font-awesome.scssファイルが相対パスである'../fonts/'を参照しているためです。

どうすれば、scss ⇄ webpack に別のファイルを @import して、そのファイルのフォルダをホームフォルダとして使用し、相対パスが期待通りに動作するように指示できるでしょうか？

どのように解決するのですか？

SCSSのSASSで、相対パスがあるファイルを@importする方法がないようです。

というわけで、代わりになんとか この を動作させることができました。

• .js または .jsx ファイルにある scss \ css font-awesome ファイルをインポートしてください。 ではなく のスタイルシートファイルをインポートしてください。

  font-awesome/scss/font-awesome.scss' をインポートします。   
  

• webpack.configファイルに追加します。

    モジュールに追加します。
    {
        ローダー
        [
            {test: /.js?$/, loader: 'babel-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ },
            {test: /.jsx?$/, loader: 'babel-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ },
            {test: /.scss?$/, loaders: ['style-loader', 'css-loader', 'sass-loader']}。        
            {test: /.svg(\?v=Ⓐ+Ⓐ)?$/, loader: 'file-loader?mimetype=image/svg+xml'},
            {test: /.woff(\?v=Chème+Chème.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},
            {test: /.woff2(\?v=Centa+Centa+Centa?d+)?$/, loader: "file-loader?mimetype=application/font-woff"},
            {test: /test: /tf(\?v=¥document+¥document+¥document+)?$/, loader: "file-loader?mimetype=application/octet-stream"},
            {test: /.eot(\?v=JPY+JPY+JPY+JPY)?$/, loader: "file-loader"},
        ]
    }