React+webpack Introducing Font Icons

In the use of React+webpack to build the project process will inevitably use the font icon, in the introduction process error, do not recognize the font icon file in the @ character, error

　　

Uncaught Error:module Parse failed:unexpected character ' @ '

Workaround, modify the Webpack configuration file

　　

webpack.config.js{Test:/\.css$/, use:[' Style-loader ',                    ' Css-loader ']}, {test:/\.less$/, exclude:/node_modules/, Use:ExtractTextPlugin.extract ({fallback:"Style-loader", use:[{loader:"Css-loader"}, {loader:"Less-loader"} ]})}, {test:/\. (Woff|svg|eot|ttf) \??. *$/, use:[' File-loader '                ]            }

Don't forget, after installing Extract-text-webpack-plugin, introduce

　　

Const Extracttextplugin = require (' Extract-text-webpack-plugin ');p lugins:[    New Extracttextplugin (' src/style/style.css ')// font icon path ]

Finally, the font icon's Style.css file is normally introduced into the file.

Import '.. /style/style.css '// According to the actual path introduced

React+webpack Introducing Font Icons