Element: When [Bug Report] configuring vue-cli3/webpack4, the font loading path is not correct.

[cifaz]

Element UI version

2.4.5

OS/Browsers version

windows10

Vue version

2.5.16

Reproduction Link

https://github.com/cifaz/vuecli3test.git

Steps to reproduce

背景, 此项目使用的vue-cli3, webpack4, 使用内置cssloader时, 导入element css时会出错
需要将css中导入字体部分修改引入方式,
@font-face{font-family:element-icons;src:url(fonts/element-icons.woff)
类似的路径应该改为
@font-face{font-family:element-icons;src:url(./fonts/element-icons.woff)

重现步骤
1.下载项目
2.npm install or yarn install
3.yarn serve 即会报错
4.报错位置 src/main.js 11行 import 'element-ui/lib/theme-chalk/index.css';

What is Expected?

import 'element-ui/lib/theme-chalk/index.css';
编译正常, 可使用元素

What is actually happening?

编译失败

ERROR in ./node_modules/element-ui/lib/theme-chalk/index.css (./node_modules/css-loader??ref--6-oneOf-3-1!./node_modules/postcss-loader/lib??ref--6-oneOf-3-2!./node_modules/element-ui/lib/theme-chalk
/index.css)
Module not found: Error: Can't resolve 'fonts/element-icons.ttf' in 'E:\project\nodejs\webstorm\201808\testaaa\node_modules\element-ui\lib\theme-chalk'
@ ./node_modules/element-ui/lib/theme-chalk/index.css (./node_modules/css-loader??ref--6-oneOf-3-1!./node_modules/postcss-loader/lib??ref--6-oneOf-3-2!./node_modules/element-ui/lib/theme-chalk/index
.css) 7:781-815

[jikkai]

这个问题应该来自你 vue.config.js 中关于 css modules 的配置，默认 vue-cli@3 创建的项目不存在此问题

[cifaz]

默认创建没有问题? 是试过吗? 是怎么回事呢

[cifaz]

npm install @vue/cli 才是安装vuecli3

[cifaz]

是开启了css.module=true的原因

[usercao]

你好，我也碰到了这个问题，vue-cli 3.0.1版本，使用按需引入的方式会报这个错误，请问你是如何解决的呢？

[usercao]

@jikkai error=>[Intervention] Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: http://localhost:8888/fonts/element-icons.2fad952a.woff

[ellakan]

在vue-cli3.0 webpack4创建的工程，我遇到了同样的问题。在vue.config.js中把对css的定义就可以了。起作用的应该是css.modules置成false（ modules: false, // 是否开启支持‘foo.module.css’样式）

[usercao]

@ellakan 但是我config里面并没有关于css.modules设置啊

[zwwtj2014]

@usercao css.modules设置成true会影响的是一楼提的问题，找不到font，你说的这个问题我也遇到过，重新start就没了。。我也没细看为什么

[oooowl]

我也是相同问题，可是我项目需要启用css.modules，不知道现在怎么解决

[Adesubomi]

Can you guys just please speak English.. :(

[jiangzhenggeng]

有解决的吗，我也遇到此问题，开启css modules也报错，关闭就没事

[inroam]

有解决的吗，我也遇到此问题，开启css modules也报错，关闭就没事

楼主已给解决方案了 字体路径前面加./

[Ningyunlongweb]

目前有一种方法可以解决，但是不能套父级class，看官网自定义主题配置。
在引入主题之前，加入这句话。
$--font-path: '~element-ui/lib/theme-chalk/fonts';