使用vue-cli 生成的webpack 项目,使用scss引入字体文件"eot、svg、ttf、woff",在运行项目的时候报错

报错信息如下:

Uncaught Error: Cannot find module '../fonts/sell-icon.eot?k5xf13' at webpackMissingModule (index.scss?9c8b:7) at eval (index.scss?9c8b:7) at Object../node_modules/css-loader/index.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/lib/loader.js?!./src/common/scss/index.scss (app.js:4837) at webpack_require (app.js:724) at fn (app.js:101) at eval (index.scss?ab6e:4) at Object../src/common/scss/index.scss (app.js:10066) at webpack_require (app.js:724) at fn (app.js:101) at eval (main.js:13)

image.png

网上查了下,原来 woff2、eot、ttf、otf,在webpack中配置的是url-loader,然而在icon-font.scss中却写的是url,只要都改成url-loader就可以了。

@font-face {
  font-family: 'sell-icon';
  src: url-loader('../fonts/sell-icon.eot?k5xf13');
  src: url-loader('../fonts/sell-icon.eot?k5xf13#iefix') format('embedded-opentype'),
          url-loader('../fonts/sell-icon.ttf?k5xf13') format('truetype'),
          url-loader('../fonts/sell-icon.woff?k5xf13') format('woff'),
          url-loader('../fonts/sell-icon.svg?k5xf13#sell-icon') format('svg');
  font-weight: normal;
  font-style: normal;
}

Tips:vue-cli3 对webpack进行了处理,它不会把配置文件暴露出来,你可以通过 vue inspect > output.js 将配置信息输出到一个文件进行查看,但要修改其中配置需要在vue.config.js中修改覆盖默认设置

你可能感兴趣的:(使用vue-cli 生成的webpack 项目,使用scss引入字体文件"eot、svg、ttf、woff",在运行项目的时候报错)