Webpack: import bootstrap fonts errors

Created on 4 Jan 2017 · 4Comments · Source: vuejs-templates/webpack

When I singlely import bootstrap fonts file in my scss file like below:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('modules/fonts/glyphicons-halflings-regular.eot');
  src: url('modules/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('modules/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('modules/fonts/glyphicons-halflings-regular.woff') format('woff'), url('modules/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('modules/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

my webpack config is default, browser eport erros:

Failed to decode downloaded font: data:application/font-woff;base64,

Then I change the webpack base config like below:

     {
        test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url',
        query: {
          limit:10000,
          minetype: 'application/font-woff',
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url',
        query: {
          limit:10000,
          minetype: 'application/octet-stream',
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }

      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file',
        query: {
          limit:10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url',
        query: {
          limit:10000,
          minetype: 'image/svg+xml',
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      },

The error comes out again.
Does someone have the same problem?

Source