ElementUI CSS / fonts issue

[Pouyan Savoli]

I installed ElementUI and vue-awesome. To get them to work I needed to change some files. This is how my popup/index.js looks like:

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Icon from 'vue-awesome/components/Icon.vue'
import 'vue-awesome/icons/sync'
import 'vue-awesome/icons/plus-square'
import 'vue-awesome/icons/copy'

import App from './App.vue'

Vue.use(ElementUI)
Vue.component('icon', Icon)

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

and I did following changes in webpack.config.js:

      {
        test: /\.css$/,
        use: [
          //isDevMode ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
          'vue-style-loader',
          'css-loader',
        ],
      },
      {
        test: /\.(png|jpg|gif|svg|ttf|woff)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]',
        },
      }

mini-css-extract-plugin doesn't output element-ui/lib/theme-chalk/index.css completely inside popup.css for some reason, but vue-style-loader works though, I can see complete imported CSS as an inline CSS inside popup DOM.

Since ElementUI makes use of fonts for icons, I had to add new loader for ttf/woff. Even though webpack doesn't throw any error, ElementUI icons are not showing up:

Failed to load resource: net::ERR_FILE_NOT_FOUND .element-icons.woff:1
Failed to load resource: net::ERR_FILE_NOT_FOUND .element-icons.ttf:1

vue-awesome icons work fine though.

[Muhammad Ubaid Raza]

Regarding mini-css-extract-plugin it do strip down css to minimize output size (unused css/styles are removed from the otuput file), so this is expected behavior.

Did you add the new folder to copy plugin?
here: https://github.com/mubaidr/vue-chrome-extension-boilerplate/blob/master/webpack.config.js#L95

And also try using url-loader for the font files.

[Pouyan Savoli]

Thanks. I solved it with:

const nodeModules = path.resolve(__dirname, './node_modules')

new CopyWebpackPlugin([
  { from: 'assets', to: 'assets' },
  { from: 'manifest.json', to: 'manifest.json', flatten: true },
  { from: nodeModules + '/element-ui/lib/theme-chalk/fonts/element-icons.ttf', to: 'fonts/elements-icons.ttf', flatten: true },
  { from: nodeModules + '/element-ui/lib/theme-chalk/fonts/element-icons.woff', to: 'fonts/elements-icons.woff', flatten: true }
])

{
  test: /\.(png|jpg|gif|svg|ttf|woff)$/,
  loader: 'url-loader',
  options: {
    name: '[name].[ext]?[hash]',
  },
}

wrt mini-css-extract-plugin indeed its working as it is designed, however it apparently fails to see classes within element-ui components