Element: [Bug Report] the version 2.8.2 can not get woff and ttf in production environment

Created on 28 Apr 2019  ·  4Comments  ·  Source: ElemeFE/element

Element UI version

2.8.2

OS/Browsers version

win10 x64 / chrome 73.0.3683.103

Vue version

2.6.10

Reproduction Link

https://elementui.github.io/issue-generator/#/zh-CN

Steps to reproduce

the new version of chunk-elementUI.css is like this:

@font-face {
font-family:element-icons;
font-style:normal;
font-weight:400;
src:url(static/fonts/element-icons.535877f.woff) format("woff"),url(static/fonts/element-icons.732389d.ttf) format("truetype")
}

the old version of chunk-elementUI.css is like this:

@font-face {
font-family: element-icons;
src: url(../../static/fonts/element-icons.2fad952a.woff) format("woff"),url(../../static/fonts/element-icons.6f0a7632.ttf) format("truetype");
font-weight: 400;
font-style: normal
}

the difference of the old version and the new version is font-face's src:url removed of '../../',and this is why it can not show in production environment

What is Expected?

get the resource woff and ttf

What is actually happening?

can not get the resource of woff and ttf ,just because it has more than one directory "static/css"
please fixed it in the next version
thank you

Most helpful comment

I found some research and found a temporary solution

   {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]'),
          // 调整[email protected]字体打包后的引用路径
          publicPath: '../../'
        }
   }

All 4 comments

I found some research and found a temporary solution

   {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]'),
          // 调整[email protected]字体打包后的引用路径
          publicPath: '../../'
        }
   }

I found some research and found a temporary solution

   {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]'),
          // 调整[email protected]字体打包后的引用路径
          publicPath: '../../'
        }
   }

I found some research and found a temporary solution

   {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]'),
          // 调整[email protected]字体打包后的引用路径
          publicPath: '../../'
        }
   }

will it affect using in Ali Iconfont ?

try em -rf /node_modules and re-install npm install

try em -rf /node_modules and re-install npm install

The suggestion does not fix the problem, @iamkun does it worked in your machine?

Was this page helpful?
0 / 5 - 0 ratings