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)
I agree with @LucienLee ,but in webpack2,you can config app like this
Actually, you could overwrite
publicPath
inExtractTextPlugin
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 asrootpath/static/css/static/fonts
, because you might change theassetsPublicPath
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 onerootpath/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: '../../'})
Use plain
<link>
tag to include bootstrap. You don’t need Webpack to process it anyway.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. Usingbootstrap-sass
in SCSS, this is what I use: