CODEWITHSUNDEEP
cssvue.jswebpackfontsproduction
Gaetan bruel
Gaetan bruel

Reputation: 21

Build prod don’t display font - basic webpack init

I need to use font named ‘myFontName’ from ttf file in production environment after launch this command : 

npm run build

For this test, i have only initialize project with this command :

vue init webpack myProjectName

In dev environment (npm run dev) i can display and use my font. But i can’t see the same font after build. However, in the production environment i can see my font in css rules (browser console).

So, font seems to be display in dev and not in production.

This is my tree project: 

src
|_assets
|_components
   |componentfile.vue
   |_fonts
      |_myFontFile.ttf

This is my dist folder tree :

dist
|_js
|_static
   |_fonts
      |_myFontFile.ttf

I call my font directly in my component.vue file :

<script scoped>
@font-face{
font-family:"myFontName";
src: url("./fonts/myFontFile.ttf") format("truetype");
}
<script>

Webpack is nativ from init. I have this loader in my webpack.base.conf.js :

{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
  limit: 10000,
  name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
 }
}

For build config : 

build{
  build.assetsPublicPath: ‘/’
}

So, what's wrong ? Why prod env don't display my font correctly ? Thanks to help me to resolve this font problem.

Upvotes: 1

Views: 921

Answers (1)

Gaetan bruel
Gaetan bruel

Reputation: 21

Okay no response ? Nobody...

Finally, here is my solution.

In util.js file, insert : 

publicPath: '../../'

In this part of code 

// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
    publicPath: '../../'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

But why ?

Check this two similar issues..

Vuejs forum similar issue
Github similar issue

After build, i can inspect style CSS files in

/dist/src/static/css/

... and noted that my @font-face source have the wrong path after build according to ma dist tree folder :

@font-face{font-family:myFontFileBis;src:url(static/fonts/myFontFileBis.ttf) format("truetype")}

Instead of url(static/fonts/myFontFileBis.ttf), i need to get url(../../static/fonts/myFontFileBis.ttf).

So, i need to set publicPath in util.js.

it work now !

Upvotes: 1

Related Questions