-
-
Notifications
You must be signed in to change notification settings - Fork 4.9k
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
How to use Bootstrap 4 and Sass (and jQuery) #215
Comments
thanks I added it to the FAQ and in the wiki https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-use-Bootstrap-4-and-Sass-(and-jQuery) |
Hey @alvipeo, thanks a lot for sharing how to do this. I noticed something (and maybe is that I'm just tired) with a couple of the classes I'm trying to apply, namely |
I figured it out, it is loading Bootstrap version 3, not 4 as I intended. From https://github.com/shakacode/bootstrap-loader/ You need to have a .bootstraprc that explicitly uses version 4, like so: https://github.com/shakacode/bootstrap-loader/blob/master/.bootstraprc-4-default This fixed it for me. |
I'm quite sure that I carefully replicated all above steps, and still the production build fails: c:\path\to\angular2-webpack-starter\node_modules\webpack-md5-hash\plugin\webpack_md5_hash.js:27 TypeError: Reduce of empty array with no initial value Debug build is working fine, as well as production build without jQuery, SASS & bootstrap. EDIT: that particular problem was due to missing empty line at the end of vendors.ts file |
When following the above guidelines, im getting:
Tried googling like hell, looking through issues etc, nothing. |
@Znow I'm not using this setup, but boostrap 4 is written in ES6, so I'm guessing the babel is a dependency of the bootsrap-loader. You have it npm installed as a dev dependency? |
What version of node are you using @Znow ? I think I upgraded my node version and that fixed it. (you could use something like nvm if you are able to so you avoid the risk of breaking something by upgrading your node) |
@ackzell Just updated node to latest, now I get another error: Along with this in Chrome DevTools: |
@Znow I didn't encounter that, sorry. Maybe removing the |
Cannot find module is a typescript error where you should provide type definitions for the module. you can also declare the module it as type any. I should probably add a note about this |
when you see the error |
Referencing in #199, consolidating UI/style related issues. |
So I set this up without postcss, but what is the proper way to pull in scss files into my components? In my component: In my webpack.config.js in loaders array: I am getting an error
So I tried to change the loader to this: Which got rid of the error, but my css is rendered with encapsulation and looks like my component is not encapsulated: So what would be the best way to have a "global" scss stylesheet, and then use component scss stylesheets together? I think I have gotten the global part, by turning off viewEncapsulation on the root app, but then do I need to turn it on for every single component inside the app to get the styles to work properly? I guess basically I am asking how to overwrite the css for the body tag from a component stylesheet. |
@jgrannas - Not sure if this is what you're referring to, but I have it set up to use a global Try using the following for the loaders in your See what I have and maybe it will help: |
Using |
If you use |
I used
|
This guide is a little bit outdated, can anyone update it ? |
Can anyone update this? |
Yesterday I was able to integrate Boostrap 4, Sass and jQuery using the informations on this "issue" on the "last" commit of the master branch. Maybe I can update the information on this issue or it's best to make a new one? |
@lpalli Can you please share your info on this. e.g. do you use require('bootstrap-loader') or do you somehow reference in webpack.config? |
@lpalli @kjartanvalur I'm also curious about this. |
@kjartanvalur @lhammond - Not sure if you're asking how to load the styles within the Angular 2 Component decorator, in which case my solution won't help. Also not sure if this is how @lpalli did it or was what he referring to, but I was able to integrate jQuery, Bootstrap 4, and Sass without using the
Then under
And then would reference SCSS files from the component (ie
The bad thing about this is that you lose the benefits of Angular 2's If you're interested in a working reference, you can see the repo I'm working on with the changes here, or just my personal fork that gets updated a bit more frequently here. It uses the latest changes in
Hope this helps someone! |
...aand actually the guide has been updated since I last checked, and instructions are working for me (including both global styles and referencing Sass within Angular's Component decorator, using |
To install bootstrap 3.
In In
It works fine for me. |
Hello, I follow the post https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-use-Bootstrap-4-and-Sass-(and-jQuery) But I have one big problem :( If, you have any solution ? Thanks |
I did anything I found (not only from here) but did not succeed in getting bootstrap integrated with webpack starter. still get:
and things are not bootstrap on html yet sigh anybody? |
Hello, I think you can try this : And, if is not working what is your version of webpack ? |
no, already had "style-loader": "^0.13.1" in package.json and no "style" anywhere.
|
What I did to make it work (Bootstrap3):
On the webpack.common.js I've added the following loaders:
and on the end I've put on the styles.scss:
For the JS components I've used the ng2-bootstrap. |
This is for someone who is looking for VUE.JS 2 and Bootstrap 4 solution: I also encourage you to take look at this URL for more sophisticate work setup https://github.com/prograhammer/example-vue-project |
ok, I'm not a pro neither in webpack nor any of these new shiny 0.x.x version tech YET, so... But just in case someone would need it, here's how I got Bootstrap 4 (alpha now) + sass working:
Resulting webpack.config.js:
I haven't changed webpack.prod.config.js so authors could help us out here please.
The text was updated successfully, but these errors were encountered: