Comments (11)
@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.
from react-slingshot.
@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
from react-slingshot.
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
from react-slingshot.
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';
from react-slingshot.
@igorizr1 This looks useful, but haven't tried. https://github.com/gowravshekar/bootstrap-webpack. That said, closing since not specific to this project.
from react-slingshot.
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.
from react-slingshot.
Another option that I used was bootstrap-loader. This allows for themeing, scripts, and style selection.
from react-slingshot.
Ah, I see this can be used to inject jQuery $ into the bootstrap module.
from react-slingshot.
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-
.
from react-slingshot.
@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.
from react-slingshot.
@harshayburadkar I put the changes into this PR. I hope this helps.
from react-slingshot.
Related Issues (20)
- Use redux-saga
- npm run remove-demo doesn't work
- Terminal font becomes invisible after npm start
- Error running 'npm install' HOT 1
- Switch Redux logic setup to use Redux Toolkit HOT 4
- Involving Database HOT 4
- why there are yarn.lock and package-lock.json both present? HOT 6
- Implementation of redux-persist with react-slingshot HOT 5
- [WARNING] Removing the demo app also removes files that do not belong to the demo app
- Get error when execute "npm start" command. HOT 1
- Required Information about peripheral files. HOT 2
- Update README about python version HOT 1
- Refused to execute inline script because it violates the following Content Security Policy directive:
- facing issue while npm run setup HOT 2
- Opentest issue
- npm run on production environment
- Add Flow please
- npm ERR! [email protected]
- jest: not found
- Build 16x fails not 18x or 20x
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-slingshot.