Element: [Bug Report] Cannot find module 'element-ui/lib/theme-chalk/fonts/element-icons.woff?t=1510834658947'

[Reechee88]

Element UI version

2.0.10

OS/Browsers version

Ubuntu 17.10

Vue version

2.5.13

Reproduction Link

https://jsfiddle.net/mmx38qxw/

Steps to reproduce

I have followed these steps:

http://element.eleme.io/#/en-US/component/custom-theme

I am using nuxt.js 1.0.0-rc11 with webapck 3

What is Expected?

Working custom theme :)

What is actually happening?

Hi,

I am tryin to customize the theme as it written here:
http://element.eleme.io/#/en-US/component/custom-theme

Content of my element-variables.scss:
`
$--collapse-border-color: #00A6EC;
$--collapse-header-color: #00A6EC;
$--collapse-header-height: 48px;
$--collapse-header-padding: 22px;
$--collapse-header-fill: white;
$--collapse-header-size: 18px;
$--collapse-content-fill: brown;
$--collapse-content-size: 20px;
$--collapse-content-color: orange;

$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";
`

When webpack compiles the scss, it gives me always this error:
Cannot find module 'element-ui/lib/theme-chalk/fonts/element-icons.woff?t=1510834658947'

I have checked and the element-icons.woff exists in the node_modules dir. I can't get rid of this annoying error.

What is the problem? How can I solve it?

Thanks,
Richard

[rudirocha]

Hey. I'm having this also
These relative modules were not found:

* ./fonts/element-icons.ttf?t=1510834658947 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./src/assets/styles/main.scss
* ./fonts/element-icons.woff?t=1510834658947 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./src/assets/styles/main.scss

vue version is 2.9.1
element-ui version is 2.0.10

[Leopoldthecoder]

@Reechee88 @rudirocha Please minify your project and upload it to GitHub.

[andreaschrist27]

had same problem

[Leopoldthecoder]

Closing for lack of reproduction.

[yoyo837]

Same problem...

custom theme doc

[yoyo837]

If delete the font file query string, it works fine.

[rumanbsl]

Enabling {modules: true} in css-loader is causing the issue.

[proepkes]

These dependencies were not found:

• fonts/element-icons.ttf in ./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
• fonts/element-icons.woff in ./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

Does not occur when css-modules are disabled (as mentioned by rumanbsl).

[alex-shamshurin]

Same issue here

[Ramarti]

vue-cli 3

• ~element-ui/lib/theme-chalk/fonts/element-icons.ttf in ../node_modules/css-loader??ref--8-oneOf-3-1!./node_modules/postcss-loader/src??ref--8-oneOf-3-2!./node_modules/sass-loader/lib/loader.js??ref--8-oneOf-3-3!./src/assets/scss/element-variables.scss
• ~element-ui/lib/theme-chalk/fonts/element-icons.woff in ../node_modules/css-loader??ref--8-oneOf-3-1!./node_modules/postcss-loader/src??ref--8-oneOf-3-2!./node_modules/sass-loader/lib/loader.js??ref--8-oneOf-3-3!./src/assets/scss/element-variables.scss

To install them, you can run: npm install --save ~element-ui/lib/theme-chalk/fonts/element-icons.ttf ~element-ui/lib/theme-chalk/fonts/element-icons.woff

[skray]

I was getting this exact error and was able to resolve it. I missed this important part of the custom theme docs:

Note that it is required to override icon font path to the relative path of Element's font files.

Adding $--font-path: '~element-ui/lib/theme-chalk/fonts'; before importing the theme's index.scss fixed the error.

[martyns0n]

Adding $--font-path: '~element-ui/lib/theme-chalk/fonts'; before importing the theme's index.scss fixed the error.

It's working without enabled css modules and give a same error on modules: true

[summertian4]

This is because wrong path.
You should put your style.css in this path:

node_modules/element-ui/lib/theme-chalk

If you look at the style.css content, you will find out why

[CracKerMe]

This is because wrong path.
You should put your style.css in this path:

node_modules/element-ui/lib/theme-chalk

If you look at the style.css content, you will find out why

and then ? what should i do? i saw this before,and how to solve icon import ?????

[toramanlis]

I was getting this exact error and was able to resolve it. I missed this important part of the custom theme docs:

Note that it is required to override icon font path to the relative path of Element's font files.

Adding $--font-path: '~element-ui/lib/theme-chalk/fonts'; before importing the theme's index.scss fixed the error.

You are my best friend now