ReactJS＆Webpackのmaterialdesigniconパッケージのインポート

Question

npm "mdi"パッケージを使用して、素材デザインアイコンをプロジェクトに追加しようとしています。しかし、私は問題があります。

webpack.config.js

var webpack = require('webpack'); 
var path = require('path'); 

var BUILD_DIR = path.resolve(__dirname, 'src/public'); 
var APP_DIR = path.resolve(__dirname, 'src'); 

var config = { 
    entry: [ 
     'webpack/hot/dev-server', 
     'webpack-dev-server/client?http://localhost:8080/', 
     APP_DIR + '/index.jsx' 
    ], 
    output: { 
     path: BUILD_DIR, 
     filename: 'bundle.js', 
     publicPath : '/' 
    }, 
    devServer : { 
     historyApiFallback: true, 
     contentBase: 'src/public/' 
    }, 
    module: { 
     loaders : [    
      { 
       test : /\.jsx?/, 
       include : APP_DIR, 
       loader : ['react-hot-loader', 'babel-loader'] 
      }, 
      { 
       test: /\.s?css$/, 
       loaders: ["style-loader", "css-loader", "sass-loader"], 
      }, 
      { 
       test: /\.(eot|svg|ttf|woff|woff2)(\??\#?v=[.0-9]+)?$/, 
       loader: 'file-loader?name=/fonts/[name].[ext]', 
      } 
     ] 
    }, 
    plugins: [ 
     new webpack.optimize.OccurrenceOrderPlugin(), 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoEmitOnErrorsPlugin() 
    ], 
    resolve: { 
     extensions: ['.js', '.jsx'] 
    } 
}; 

//dev server 

module.exports = config; 

私のアプリケーションコンポーネントは、そのApp.scssファイルで、私はsettings.scssとmaterialdesignicons.scssをインポート

import './scss/App.scss'; 

メインSCSSファイルを呼び出しますファイル

settings.scss

$mdi-font-path: "fonts/"; 

App.scss

@import "./settings.scss"; 
@import '~mdi/scss/materialdesignicons.scss'; 

プロジェクトはmain.scssファイルを経由して輸入されています。私が構築しようとするたびに

settings.scss

$mdi-font-path: "fonts/"; 

は、私はそれがwebfont項目を処理する方法を把握しようと、エラーを取得します。

ERROR in ./~/css-loader!./~/sass-loader!./src/scss/App.scss 
Module not found: Error: Can't resolve './fonts//materialdesignicons-webfont.eot?v=1.9.32' in '/<path>/app/src/scss' 
@ ./~/css-loader!./~/sass-loader!./src/scss/App.scss 7:129-189 
@ ./src/scss/App.scss 
@ ./src/App.jsx 
@ ./src/index.jsx 
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server webpack-dev-server/client?http://localhost:8080/ ./src/index.jsx 

私はファイルローダーがこれらのファイルを処理すると考えました。おそらくscssファイルをインポートしてから、ファイルローダー部分を使用せず、代わりにsass/cssローダーを使用しようとしているようです。

私はこれをどのように行うべきかを考えようとしています。

Answer 1

ファイルローダーはこれらのファイルを持っていません。あなたが持っている問題は、ファイルが見つからなかったため、ファイルローダーには届かないということです。

materialdesignicons-webfont.eotは、あなたのnode_modulesの一部ですが、私は今考えるとき、私がこれを期待./app/src/scss/fonts/materialdesignicons-webfont.eot

であることが予想されますあなた自身の$ mdi-font-pathの定義を削除してもうまく動作します。

UPDATE：

$mdi-font-path: '~mdi/fonts/'; 
@import '~mdi/scss/materialdesignicons';