webpack: got wrong bootstrap font path after building

I just use the whole vuejs-templates-webpack to create a project. I then installed bootstrap,in my entry js i required the bootstrap less files with require('bootstrap/less/bootstrap.less'); ,i then use the bootstrap glyphicon style class in my .vue template, But when i run npm run build, I found that the the fontface in the vendorXXXXX.css in the static/css folder is ./static/fonts/glyphicons-halflings-regular.f4769f9.eot?#iefix, therefore i got many 404 errors when i visit the project from my server : rootpath/static/css/static/fonts is not found on the server.

So, how to make vue-loader ignore resolving the path of the fontface in the bootstrap less file ?

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 20 (5 by maintainers)

Most upvoted comments

I agree with @LucienLee ，but in webpack2，you can config app like this

  // (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)
    }
  }

+68

bsqql123 on May 11, 2017

Actually, you could overwrite publicPath in ExtractTextPlugin as you want. This template extracts the styles when building and use the same public path as config. Hence, all path would default start like /static/.... In the original case, you got font face path as rootpath/static/css/static/fonts, because you might change the assetsPublicPath to relative path ./. In the stylesheet, your font face would like ./static/fonts/..., but css url would refer from the position of stylesheet. Then, you got this wrong one rootpath/static/css/static/fonts.

In this case, you could just add public path here. If you still stick on webpack1, that would be like return ExtractTextPlugin.extract('vue-style-loader', sourceLoader, {publicPath: '../../'})

+31

LucienLee on Nov 24, 2016

Use plain <link> tag to include bootstrap. You don’t need Webpack to process it anyway.

+14

yyx990803 on Jun 20, 2016

This is a feature of css-loader. From their Usage docs:

url(image.png) => require("./image.png")
url(~module/image.png) => require("module/image.png")

Note the imoprtant ~ prefix to reference installed packages. Using bootstrap-sass in SCSS, this is what I use:

// -------------------
// BOOTSTRAP VARIABLES
// http://getbootstrap.com/customize/#less-variables
// -------------------

// add any variables you want to override here

// ---------
// BOOTSTRAP
// ---------

$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/bootstrap';

chrisvfritz on Jun 20, 2016