Reactgo: Building stripped down version, what is the best way to use bootstrap?

Created on 18 Apr 2016 · 6Comments · Source: reactGo/reactGo

I am building a stripped down version of this repo.

I want to be able to use bootstrap and not the modular class styles that you have. What is the most efficient way to do this? Thanks!

Source

azamatsmith

Most helpful comment

This wont work if your css is delivered via npm, any suggestions how to use that?

darkyen on 19 May 2016

👍2 ❤1

All 6 comments

Add the stylesheet you want to app/helmconfig.js

Then in app/components/Meta.jxs, do something to this line...

if (__DEVSERVER__) {
  config.link = config.link.filter(l => l.rel !== 'stylesheet');
}

You can remove that line completely.....let me know if this works for you.

huyphamily on 29 Apr 2016

Trying to do the same thing and add Bootstrap. Not getting it to work. Meta.jsx is already altered to reflect your suggested change. Here's now I modified helmconfig.js:

link: [
// Add to homescreen for Chrome on Android
{ rel: 'icon', href: favicon },
{ rel: 'icon', sizes: '192x192', href: chromecon },
// Add to homescreen for Safari on IOS
{ rel: 'apple-touch-icon', sizes: '152x152', applecon },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto+Condensed', type: 'text/css' },
{ rel: 'stylesheet', href: 'https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css'},
{ rel: 'stylesheet', href: '/assets/styles/main.css' }
// SEO: If your mobile URL is different from the desktop URL,
// add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones
// { 'rel': 'canonical', 'href': 'http://www.example.com/' }
],

tadwhitaker on 10 May 2016

it looks good, seems like it should work.

The line that is removed from Meta.jsx should stop it from filtering the stylesheet in development.

(all of this is assuming you're grabbing bootstrap from a cdn, which is the easiest way, which you are)

huyphamily on 11 May 2016

❤1

Couldn't get that to work. Monkey around a fair bit. Wound up just adding it in to server.jsx and that worked:

        <head>
          ${header.title.toString()}
          ${header.meta.toString()}
          ${header.link.toString()}
          <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
        </head>

tadwhitaker on 11 May 2016

BTW: This repo is amazing. Well done.

tadwhitaker on 11 May 2016

This wont work if your css is delivered via npm, any suggestions how to use that?

darkyen on 19 May 2016

👍2 ❤1

Was this page helpful?

0 / 5 - 0 ratings