integration with bootstrap

[coryhouse]

integration with bootstrap

[nickytonline]

@igorizr1, it's very easy to integrate bootstrap. From the root of the project, run npm i bootstrap-sass --save

In the src/styles/styles.scss simply add the following import at the top of the SASS file, @import "node_modules/bootstrap-sass/assets/stylesheets/_bootstrap";.

You now have bootstrap.

[corzzo]

@igorizr1 I'm getting problems with the fonts/svg:

ERROR in .//css-loader?sourceMap!.//sass-loader?sourceMap!./src/styles/styles.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/bootstrap/glyphicons-halflings-regular.eot ... @ .//css-loader?sourceMap!.//sass-loader?sourceMap!./src/styles/styles.scss

ERROR in .//css-loader?sourceMap!.//sass-loader?sourceMap!./src/styles/styles.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/bootstrap/glyphicons-halflings-regular.woff2 ... @ .//css-loader?sourceMap!.//sass-loader?sourceMap!./src/styles/styles.scss

ERROR in .//css-loader?sourceMap!.//sass-loader?sourceMap!./src/styles/styles.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/bootstrap/glyphicons-halflings-regular.woff ... @ .//css-loader?sourceMap!.//sass-loader?sourceMap!./src/styles/styles.scss

ERROR in .//css-loader?sourceMap!.//sass-loader?sourceMap!./src/styles/styles.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/bootstrap/glyphicons-halflings-regular.ttf ... @ .//css-loader?sourceMap!.//sass-loader?sourceMap!./src/styles/styles.scss

ERROR in .//css-loader?sourceMap!.//sass-loader?sourceMap!./src/styles/styles.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/bootstrap/glyphicons-halflings-regular.svg ... @ .//css-loader?sourceMap!.//sass-loader?sourceMap!./src/styles/styles.scss

[coryhouse]

Here's an example of how I integrated bootstrap. This is a separate project that uses a slightly modified version of Slingshot, but close enough you can get the idea: https://github.com/coryhouse/ps-redux

[fulvio-m]

I hope this late answer can be of any help to anyone
@corzzo it works fine if you do the import in the root index.js like this:

import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss';

[coryhouse]

@igorizr1 This looks useful, but haven't tried. https://github.com/gowravshekar/bootstrap-webpack. That said, closing since not specific to this project.

[raythree]

I have no issue loading bootstrap via an npm install and a require of the css. However there seems to be issues if you use any of bootstrap.js, like tooltips. You can require it, but it requires JQuery, and I think I recall it wanting JQuery to be globally available, e.g. not a local "import $ from 'jquery'"... I need to re-investigate this. I was using react-bootstrap-theme-switcher on my last app and that loads both bootstrap and jquery via dynamic links so I didn't have to worry about it.

[kwelch]

Another option that I used was bootstrap-loader. This allows for themeing, scripts, and style selection.

[raythree]

Ah, I see this can be used to inject jQuery $ into the bootstrap module.

[kwelch]

Yes, that being said I switched from bootstrap to react-toolbox because it
modeled what I was looking for in a UI framework better.

On Thu, Aug 25, 2016, 6:40 AM Bill Walker [email protected] wrote:

Ah, I see this https://github.com/webpack/imports-loader can be used to
inject jQuery $ into the bootstrap module.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#70 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABPE3CPoMlxsr0mx9zHzsXlC8X9O3txUks5qjX8jgaJpZM4Hsrh-
.

[harshayburadkar]

@kwelch react-toolbox looks cool too. How did you go about integrating it in slingshot? Did you run into any issues? I think the css isn't getting applied for me. The react toolbox button I tried to put in my page shows up like a plain HTML button.

[kwelch]

@harshayburadkar I put the changes into this PR. I hope this helps.