Webpack: got wrong bootstrap font path after building

[aflext]

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 ?

[chrisvfritz]

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';

[aflext]

@chrisvfritz all my project uses less, its a huge work to transform to sass. And i don't think it's a good idea to modify the bootstrap source code.

[yyx990803]

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

[chrisvfritz]

I wouldn't want to convert all my styles to a different language either. Fortunately, you don't have to. I use SCSS, so that's the example I had on hand, but a similar technique should work just as well for LESS. I do believe Bootstrap 4 will be SCSS-only, so that transition may be inevitable if you'd like to upgrade. 😞

As for modifying the Bootstrap source code - that's not what we're doing here. This isn't even a hack. These Bootstrap variables are _made_ to be overridable. This is especially apparent in the SCSS version, where the variables all use !default, meaning that value should be assigned to the variable _only_ if it hasn't been previously defined.

[aflext]

@yyx990803 Do you mean thant i just link the bootstrap.min.css file in the head of my html ? What if i want to use the less variables defined in bootstrap less ?

[aflext]

@chrisvfritz Thanks a lot for replying, would you mind posting a demo code for using scss with variable override ?

[chrisvfritz]

In that first example I provided, I'm overriding $icon-font-path by declaring it before the main Bootstrap import. In LESS, I believe variables are lazy-loaded, so you may have to declare that variable after the main Bootstrap import.

[aflext]

@chrisvfritz I did try to override the font path variable in less with ,but the url path of font facc is still the like ./static/fonts/glyphicons-halflings-regular.448c34a.woff2:

src/home/Home.vue:

<style src="./index.less" lang="less"></style>

src/home/index.less:

@import '~bootstrap/less/bootstrap.less';
@icon-font-path: "~bootstrap/fonts/";

dist/static/css/app.326961f0db864479a769a9efc95ceea9.css:

@font-face {
    font-family: Glyphicons Halflings;
    src: url(./static/fonts/glyphicons-halflings-regular.f4769f9.eot);
    src: url(./static/fonts/glyphicons-halflings-regular.f4769f9.eot?#iefix) format('embedded-opentype'), url(./static/fonts/glyphicons-halflings-regular.448c34a.woff2) format('woff2'), url(./static/fonts/glyphicons-halflings-regular.fa27723.woff) format('woff'), url(./static/fonts/glyphicons-halflings-regular.e18bbf6.ttf) format('truetype'), url(./static/img/glyphicons-halflings-regular.8988968.svg#glyphicons_halflingsregular) format('svg')
}

But i just want this

@font-face {
    font-family: Glyphicons Halflings;
    src: url(../fonts/glyphicons-halflings-regular.f4769f9.eot);
    src: url(../fonts/glyphicons-halflings-regular.f4769f9.eot?#iefix) format('embedded-opentype'), url(../fonts/glyphicons-halflings-regular.448c34a.woff2) format('woff2'), url(../fonts/glyphicons-halflings-regular.fa27723.woff) format('woff'), url(../fonts/glyphicons-halflings-regular.e18bbf6.ttf) format('truetype'), url(../img/glyphicons-halflings-regular.8988968.svg#glyphicons_halflingsregular) format('svg')
}

[chrisvfritz]

Not sure, sorry. 😕 Haven't used the LESS version or LESS itself really. This issue on css-loader may have better information.

[LucienLee]

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: '../../'})

[bsqql123]

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

[docnoe]

@bsqql123 Thank you for that detailed description!

[jiayouwyhit]

@bsqql123 @LucienLee Thank you so much for your detailed explanation. It really solves my issues.

[SuperYun]

666666666

[winwangqi]

@bsqql123 Thank you so much. I've trapped by this problem for a long time.

[jobsamuel]

Thanks a lot @LucienLee!!! :tada:

[xiangst0816]

@bsqql123 Thank you very much!

[gezichenshan]

@bsqql123 thank you for saving my brain.

[masterZSH]

@bsqql123 Good choice

[mx1120]

@bsqql123 , thank you very much, but i can't play the music in project , is there something wrong?