-
-
Notifications
You must be signed in to change notification settings - Fork 78.8k
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
Bootstrap 4 with npm and webpack #22196
Comments
@IdanCo Do you need to install a dependency to be able to use |
@olivia101 good question. I took this convention from sass-loader, but if in addition to sass-loader you're also using postcss than this could be related - Anyway you can try without the tilde, or worst case use '../../node_modules'. let me know how it goes. |
Really nice explanations @IdanCo 👍 I'm also using Bootstrap w/ Webpack but I have a slightly different configuration regarding the "Jquery & Tether" part. Instead of using this : new webpack.ProvidePlugin({ // inject ES5 modules as global vars
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Tether: 'tether'
}) which does not inject $ as a global variable but 'auto-require' it when encountered in a dependency, I use the "expose-loader" (which, actually, expose global variables ;-) ). You could use it directly in the webpack config but, personnaly, I prefer using it in my entry file like this : require('expose-loader?$!expose-loader?jQuery!jquery');
require("expose-loader?Tether!tether"); (yeah, the syntax looks like some sort of incantations or something ;-)) But if you prefer the webpack config way, it looks like this : module: {
rules: [
{
test: require.resolve('jquery'),
use: [
{ loader: 'expose-loader', options: 'jQuery' },
{ loader: 'expose-loader', options: '$' }
]
},
{
test: require.resolve('tether'),
use: [
{ loader: 'expose-loader', options: 'Tether' }
]
}
]
} My 2 cents... |
O u can use bootstrap-loader https://github.com/shakacode/bootstrap-loader |
Is there something here we need to update in our docs or JS? |
@mdo I think a webpack configuration is something that many developers might find useful. I'll wrap it as a PR and leave it for you to decide. |
thanks for reporting @bbottema , a few questions to better diagnose the issue -
|
Smells to me like could be related to this issue, try a couple of things for me -
$navbar-inverse-color: #FFF;
$navbar-light-color: #FFF;
|
@IdanCo Sorry, nevermind. I made a mess out of it :D. My config was not in order, |
Error message “Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)” twbs/bootstrap#22196
Error message “Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)” twbs/bootstrap#22196
Error message “Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)” twbs/bootstrap#22196
@Mioleris bootstrap-loader currently does not support Bootstrap 4. |
Closing since #22423 was merged. |
For consideration: |
This thread helped me. But dont forget to install dependencies. Im surprised this is not mentioned more explicit in https://getbootstrap.com/ npm installation section.
|
@ajthinking it's written here : https://getbootstrap.com/docs/4.0/getting-started/webpack/#importing-javascript
|
@Johann-S yes that page is great! But on https://getbootstrap.com no dependencies are mentioned in the npm section thats what caught me. |
Feel free to check out https://github.com/petrpacas/webpack-bootstrap-4-setup to see how I tackled this... |
I would stay far away from |
^^ +1 on the staying away from bootstrap-loader you will regret using it I had to rip it out after it randomly broke compilation due to buggy path resolve & bootstrap version code. After forking bootstrap-loader in an attempt to fix their code I quickly realized my mistake in adding it in the first place. |
Seeing all the follow-up comments, do we need more docs updates here? |
I'm very new to webpack, but I have just set up a project and I have TypeScript and SCSS compiling correctly. I asm using webpack version
The TypeScript compiles, but I am given the following error on page load:
I have the following packages installed in my package.config:
This is the typescript code:
I imagine I also have to declare the Is there something missing from the docs that I need to do? |
Update: I fixed my issue by using: Apart from that the docs were enough for me to get going personally. |
Well, I’m not a Webpack guru myself, and I’m glad you sorted it out, but just gonna mention that my setup is importing the individual bootstrap.js pieces (so that you can select only the necessary ones), and you are importing the whole package. Which might ofc be fine for you…
Just sayin’
Take care,
Petr
…On 21. 3. 2018 16:58 +0000, Connel Hooley ***@***.***>, wrote:
Update: I fixed my issue by using:
import "bootstrap/dist/js/bootstrap.js
Apart from that the docs were enough for me to get going personally.
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.
|
Well done, @IdanCo ! It worked nicely for me. Thanks! |
So many different solutions, so many different workable options, yet none of them helped me in the past 3 hours getting bootstrap up and running... The webpack documentation page looks so simple but it is not that simple, apparently. Please include some more documentation on how to test if it is working and if there are any differences when using typescript. I just installed, included, imported and my app just runs fine, no errors, but yet no col-md or container styling working.. meh, i'll just return to CDN's... |
Feel free @Ruud-cb to improve our docs if you found something, we cannot covered every use case |
I lock this issue everything is here: https://getbootstrap.com/docs/4.0/getting-started/webpack/ If someone want to improve our docs feel free to do it, or you can open an issue which point what is missing in our docs |
I've been spending WAY too much time on adding bootstrap 4 with npm to a webpack project. In hope to save others the time, I thought i'll share the final recipe -
start by installing bootstrap in your project -
(notice bootstrap has two dependencies - jquery and tether. If you would rather have explicit versions of those two, you should install them as well)
import bootstrap's javascript through index.js -
(i'm assuming you're using es6, in case of es5, use
require('bootstrap')
)The previous line will only import the js part of bootstrap. for the styling part you have two options -
1. Precompiled SASS
Inside one of your sass files (index.scss for example) add this line -
(notice the ~ (tilde) which points to the node modules folder)
This mehtod is beneficial if you plan on using your own version of the wonderful _variables file bootstrap comes with. just make sure you import _variables before bootstrap. Also, now you can use all the cool mixins bootstrap has.
2. Compiled CSS only
If you're not planning on using the variables or the mixins, and prefer the precooked css file, simply add this line to index.js or any other js file -
(btw - you can also import this way the sass file, but it's nicer to import it via another sass file as shown in pervious mehtod)
now comes the webpack part. for jquery and tether to be available as a global variable throughout the project, you'll have to add this to your webpack plugins sections -
The different jquery definition are meant to answer requirements of different libraries (for example angular looks for 'window.jQuery'). I'm assuming your webpack.config already has rules for scss and/or css.
And that's it! now you have bootstrap in your webpack project.
Let me know if any further explanation is needed, and if anyone knows of a better way, please share.
The text was updated successfully, but these errors were encountered: