解决 vue3.x 引入 bootstrap样式font字体库找不到

痛定思痛。 2023-01-16 02:16 190阅读 0赞

问题描述，在vue3.x项目中使用了bootstrap.css文件，运行项目，font库找不到

异常信息  
These relative modules were not found:

\* ../fonts/glyphicons-halflings-regular.eot in ./node\_modules/css-loader/dist/cj  
s.js??ref--6-oneOf-3-1!./node\_modules/postcss-loader/src??ref--6-oneOf-3-2!./src  
/bootstrap.css  
\* ../fonts/glyphicons-halflings-regular.svg in ./node\_modules/css-loader/dist/cj  
s.js??ref--6-oneOf-3-1!./node\_modules/postcss-loader/src??ref--6-oneOf-3-2!./src  
/bootstrap.css  
\* ../fonts/glyphicons-halflings-regular.ttf in ./node\_modules/css-loader/dist/cj  
s.js??ref--6-oneOf-3-1!./node\_modules/postcss-loader/src??ref--6-oneOf-3-2!./src  
/bootstrap.css  
\* ../fonts/glyphicons-halflings-regular.woff in ./node\_modules/css-loader/dist/c  
js.js??ref--6-oneOf-3-1!./node\_modules/postcss-loader/src??ref--6-oneOf-3-2!./sr  
c/bootstrap.css  
\* ../fonts/glyphicons-halflings-regular.woff2 in ./node\_modules/css-loader/dist/  
cjs.js??ref--6-oneOf-3-1!./node\_modules/postcss-loader/src??ref--6-oneOf-3-2!./s  
rc/bootstrap.css

解决方法：  
打开bootstrap.css文件，查找@font-face代码

@font-face \{  
  font-family: 'Glyphicons Halflings';

src: url('../fonts/glyphicons-halflings-regular.eot');  
  src: url('../fonts/glyphicons-halflings-regular.eot?\#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg\#glyphicons\_halflingsregular') format('svg');  
\}

修改为

@font-face \{  
  font-family: 'Glyphicons Halflings';

src: url('/fonts/glyphicons-halflings-regular.eot');  
  src: url('/fonts/glyphicons-halflings-regular.eot?\#iefix') format('embedded-opentype'), url('/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('/fonts/glyphicons-halflings-regular.woff') format('woff'), url('/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('/fonts/glyphicons-halflings-regular.svg\#glyphicons\_halflingsregular') format('svg');  
\}

参考文章  
https://www.runoob.com/cssref/css3-pr-font-face-rule.html