New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
got wrong bootstrap font path after building #166
Comments
This is a feature of css-loader. From their Usage docs:
Note the imoprtant // -------------------
// 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 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. |
Use plain |
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 |
@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 ? |
@chrisvfritz Thanks a lot for replying, would you mind posting a demo code for using scss with variable override ? |
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. |
@chrisvfritz I did try to override the font path variable in less with ,but the url path of font facc is still the like
But i just want this
|
Not sure, sorry. 😕 Haven't used the LESS version or LESS itself really. This issue on |
Actually, you could overwrite In this case, you could just add public path here. |
I agree with @LucienLee ,but in webpack2,you can config app like this
|
@bsqql123 Thank you for that detailed description! |
@bsqql123 @LucienLee Thank you so much for your detailed explanation. It really solves my issues. |
666666666 |
@bsqql123 Thank you so much. I've trapped by this problem for a long time. |
Thanks a lot @LucienLee!!! 🎉 |
@bsqql123 Thank you very much! |
@bsqql123 thank you for saving my brain. |
@bsqql123 Good choice |
@bsqql123 , thank you very much, but i can't play the music in project , is there something wrong? |
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 runnpm run build
, I found that the thefontface
in thevendorXXXXX.css
in thestatic/css
folder is./static/fonts/glyphicons-halflings-regular.f4769f9.eot?#iefix
, therefore i got many404 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 ?
The text was updated successfully, but these errors were encountered: