how to use element-ui in this template?

Describe the bug

how to use element-ui in this template?

element-ui: https://element.eleme.io/#/en-US/component/quickstart

To Reproduce Steps to reproduce the behavior:

1. use vue init kocal/vue-web-extension tmp to install a tmp project and install and so on.
2. follow element-ui guide using npm i element-ui -S
3. usually I add this in main.js of vue-cli template,

in this project, I tried to add it in popup.js like this.

import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import router from './router'

Vue.use(ElementUI);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  
  router,
  render: h => h(App)
})

finally, I got those errors in my terminal,

ERROR in ../node_modules/_element-ui@2.10.0@element-ui/lib/theme-chalk/index.css
Module build failed (from ../node_modules/_mini-css-extract-plugin@0.4.5@mini-css-extract-plugin/dist/loader.js):
ModuleParseError: Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
    at handleParseError (/Users/goddy/code-repo/tmp/node_modules/_webpack@4.35.2@webpack/lib/NormalModule.js:450:19)
    at doBuild.err (/Users/goddy/code-repo/tmp/node_modules/_webpack@4.35.2@webpack/lib/NormalModule.js:484:5)
    at runLoaders (/Users/goddy/code-repo/tmp/node_modules/_webpack@4.35.2@webpack/lib/NormalModule.js:343:12)
    at /Users/goddy/code-repo/tmp/node_modules/_loader-runner@2.4.0@loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/goddy/code-repo/tmp/node_modules/_loader-runner@2.4.0@loader-runner/lib/LoaderRunner.js:214:10)
    at /Users/goddy/code-repo/tmp/node_modules/_loader-runner@2.4.0@loader-runner/lib/LoaderRunner.js:205:4
    at process.nextTick (/Users/goddy/code-repo/tmp/node_modules/_enhanced-resolve@4.1.0@enhanced-resolve/lib/CachedInputFileSystem.js:73:15)
    at process._tickCallback (internal/process/next_tick.js:150:11)
 @ ./popup/popup.js 4:0-46
Child mini-css-extract-plugin ../node_modules/_css-loader@2.1.1@css-loader/dist/cjs.js!../node_modules/_element-ui@2.10.0@element-ui/lib/theme-chalk/index.css:
    Entrypoint mini-css-extract-plugin = *
    
    ERROR in ../node_modules/_element-ui@2.10.0@element-ui/lib/theme-chalk/fonts/element-icons.ttf 1:0
    Module parse failed: Unexpected character '' (1:0)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    (Source code omitted for this binary file)
     @ ../node_modules/_element-ui@2.10.0@element-ui/lib/theme-chalk/index.css (../node_modules/_css-loader@2.1.1@css-loader/dist/cjs.js!../node_modules/_element-ui@2.10.0@element-ui/lib/theme-chalk/index.css) 5:41-77
    
    ERROR in ../node_modules/_element-ui@2.10.0@element-ui/lib/theme-chalk/fonts/element-icons.woff 1:4
    Module parse failed: Unexpected character '' (1:4)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    (Source code omitted for this binary file)
     @ ../node_modules/_element-ui@2.10.0@element-ui/lib/theme-chalk/index.css (../node_modules/_css-loader@2.1.1@css-loader/dist/cjs.js!../node_modules/_element-ui@2.10.0@element-ui/lib/theme-chalk/index.css) 4:41-78

[Goddywu]

thanks, you are a very good guy.

❀.(´▽`)❀.

[Kocal]

Ah, that’s because there is no loader for fonts, it fails when trying to resolve .ttf and .woff files.

You can find the patch here, I will also open a PR to handle fonts directly.