在ReactJS和Webpack中导入materialdesignicons包

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文件

import './scss/App.scss';

然后在该App.scss文件中，导入一个settings.scss和materialdesignicons.scss文件

settings.scss

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

应用程序

@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

我的方法包括三个步骤：

1. 安装材料设计图标包

   npm install material-design-icons
   

2. 将material-icons.css文件导入.less或.scss文件/项目

   @import "~/node_modules/material-design-icons/iconfont/material-icons.css";
   

3. 将推荐的代码包含到reactjs .js文件/项目中

   <i className='material-icons' style={{fontSize: '36px'}}>close</i>
   

Answer 2

文件加载器确实把那些文件弄糟了。您遇到的问题是找不到该文件，因此它永远不会到达文件加载器。

materialdesignicons-webfont.eot是您的node_modules的一部分，但是当我现在考虑时，它应该位于./app/src/scss/fonts/materialdesignicons-webfont.eot

如果您只是删除自己的$ mdi-font-path定义，我希望这会起作用。

更新：

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