Javascript 如何导入本地版本的Google Material Icons.woff2和Webpack 1.14?

Javascript 如何导入本地版本的Google Material Icons.woff2和Webpack 1.14?,javascript,node.js,fonts,webpack,Javascript,Node.js,Fonts,Webpack,我正在从同一文件夹导入Google Fonts.woff2文件,没有问题,但是导入材质图标文件在相同的设置下不起作用。.woff2文件根本不显示在“开发人员工具”下的“我的源代码”中。我正在建立我的电子项目 我已经按照谷歌实施指南中的方法2实施了剩余的设置: 这有什么明显的问题吗?我还看到了一些npm软件包使这项工作变得更容易,但我不清楚它们是如何使这项工作变得更容易的。谢谢你能提供的帮助 我的网页字体加载程序 module: { loaders: [ {

我正在从同一文件夹导入Google Fonts.woff2文件,没有问题,但是导入材质图标文件在相同的设置下不起作用。.woff2文件根本不显示在“开发人员工具”下的“我的源代码”中。我正在建立我的电子项目

我已经按照谷歌实施指南中的
方法2
实施了剩余的设置:

这有什么明显的问题吗?我还看到了一些
npm
软件包使这项工作变得更容易,但我不清楚它们是如何使这项工作变得更容易的。谢谢你能提供的帮助

我的网页字体加载程序

  module: {
    loaders: [
      {
        test: /\.global\.css$/,
        loaders: [
          'style-loader',
          'css-loader?sourceMap'
        ]
      },
      {
        test: /^((?!\.global).)*\.css$/,
        loaders: [
          'style-loader',
          'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
        ]
      },

      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' },
    ]
  },

我也在为同样的问题而斗争。最后,我决定使用文件加载器而不是url加载器,下面是适合我的设置

网页包文件:

...
     }, {
         test: /\.woff2$/,
         loader: 'file-loader?name=[name].[ext]'
     }, {
...
然后在css文件中,您可以加载字体文件:

@font-face {
    font-family: 'MyFontName';
    src: url('../path_to_font/font_name.woff2') format('truetype');
    font-weight: normal;
    font-style: normal;
}
然后你可以使用你的字体:
字体系列:'MyFontName'


此设置的重要内容是
css
文件中的
url
字体文件的路径必须与使用字体的
css
文件相对。

非常感谢!我已经为此挣扎了好几天,我担心我不会得到任何回复。我真的很感谢你的帮助!