[Vuejs]-Can't import icomoon custom font with webpack

0👍

I also had this problem, but I solved it by modifying fonts/ to ../fonts/ in style.css

Is your relative path correct?

0👍

Fixed issue by creating new file "vue.config.js" and adding content ->

module.exports = {
    css: {
        loaderOptions: {
            scss: {
                prependData: `@import "~@/assets/styles/scss/_fonts.scss";`
            }
        }
    }
};

Then changed url of fonts in _fonts.scss ->

@font-face { 
    font-family: 'icomoon';
    src:  url('~@/assets/fonts/icomoon.eot?5jv8om');
    src:  url('~@/assets/fonts/icomoon.eot?5jv8om#iefix') format('embedded-opentype'),
      url('~@/assets/fonts/icomoon.ttf?5jv8om') format('truetype'),
      url('~@/assets/fonts/icomoon.woff?5jv8om') format('woff'),
      url('~@/assets/fonts/icomoon.svg?5jv8om#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }

Leave a comment