Reactgo: Please help how to use bootstrap-sass

[rickcoub]

I've tried too many variants. I'm trying to use react-bootstrap. Only one had worked- its set CDN style link in app/server.jsx header. But all styles from this repo in this way become broken . Now i'm looking at https://github.com/shakacode/bootstrap-loader and how everything is implemented in https://github.com/davezuko/react-redux-starter-kit but still looking for help from anybody! I've seen some issues from here, but i want dont brake native repo styles (css-modules) and add bootstrap components with it's own styles( its better if it is in sass and from node_modules folder)

[brtw]

I have a similar problem with react-bootstrap. If it were my choice, I wouldn't be interested in adding any other styles component. But at this point, I cannot reliably override or edit react-bootstrap's styles since they are not handled by webpack. Any ideas on this one?

[choonkending]

Thanks for raising this issue!

Is the problem react-bootstrap, or bootstrap-sass?

Does react-bootstrap require external stylesheets? and is the lack of styles included in our links the breaking the styling?

I'll try to spike out a solution and document it.

[brtw]

The problem is manipulating css provided by modules outside of our css modules system. react-bootstrap provides bootstrap classes and functionality. In my case, when I am on a route that a navbar link leads to, the .active class from react-bootstrap is applied. To my knowledge, any classes we define, which override that class would be renamed like 'navigation_active_23kjks'. This leaves me without any way to manipulate the properties of the .active class.

[caranicas]

yeah, I am not a fan of this whole css module revolution that I see. It is treating the most powerful part of css, the cascade as though it is a bug and not a feature.

[choonkending]

@brtw Would it make sense if you wrapped your react-bootstrap styles with

:global {
  // styles
}

?

Alternatively, you could remove ?module from this line, so that everything defaults to a global style (without the hash in the class name). And only wrap those styles you want to be in css modules with

:local {
   // modules styles
}

@caranicas I agree that cascading is a powerful feature, but it can quickly become unmaintainable when you have a large codebase and you lose __confidence__ in making changes or removing code. That's why BEM appeared and is still a powerful way of preventing unintended side effects when you add a new classname (because it might affect other parts of the page which use the same classname).

CSS modules are useful when you are developing third party modules imo, so that the consuming codebase won't have to worry about naming conflicts.

That said, I'm not sure if CSS modules works well with other third party libraries like react-bootstrap and such. Still need to find the time to think of an elegant way around this.

[psimyn]

note that there's an open PR to remove :local, so the global option may be a better way to go

Or add a separate loader block that just imports your 3rd party CSS, with CSS loader not in modules mode

https://github.com/webpack/css-loader/issues/308

[brtw]

To clarify my problem. In my navigation.css file, I dropped this at the bottom.

:global { .navbar-default .navbar-nav>.active>a { color: #FFF; } }
I also tried creating a bootstrap.css in common and importing it, but neither made any difference. The way I have coped with this, that works in most cases, is adding the bootstrap classes on the appropriate jsx like so:

   <Navbar fluid fixedTop className={cx('navbar-default')}>
    <Header>
      <Brand className={cx('navbar-brand')}>
        <IndexLink to="/" >
          <div className={cx('brand')}>
            <i className={'fa fa-angle-double-right fa-lg'} />
          </div>
          <span className={cx('title')}>Title</span>
        </IndexLink>
      </Brand>
      <Toggle />
    </Header>

    <Collapse eventKey={0}>
      <Nav navbar pullRight className={cx('navbar-nav')}>

        <LinkContainer to="/" className={cx('li')}>
          <NavItem className={cx('a')} eventKey={1}>Our Mission</NavItem>
        </LinkContainer>

        <LinkContainer to="/services" className={cx('li')}>
          <NavItem className={cx('a')} eventKey={2}>Offerings</NavItem>
        </LinkContainer>

        <LinkContainer to="/contact" className={cx('li')}>
          <NavItem className={cx('a')} eventKey={3}>Get In Touch</NavItem>
        </LinkContainer>

      </Nav>

    </Collapse>
  </Navbar>

and recreating those classes in our css system. This mostly overrides the bootstrap classes. In this case, my class for .active is correctly applied, but it has less priority than the classes gotten from react bootstrap, even using !important.

The two classes which have higher priority are located in navbar.less and bootstrap.css, both gotten from maxcdn. I query those files in helmconfig.js right above our css assets like so:

{ rel: 'stylesheet', href: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css', type: 'text/css' }, { rel: 'stylesheet', href: 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css', type: 'text/css' }, { rel: 'stylesheet', href: '/assets/styles/main.css' }

I hope this clarifies my problem. Thanks for the help!

[psimyn]

@brtw you don't need to call cx() if you are using global styles - you can just use strings for className. cx (or classNames) are using to transform the classes to local styles.

If you check the classes on the generated DOM elements (use Devtools on the page) you can see what classes are being used, and the resultant styles.

Hope this helps troubleshoot

[caranicas]

@choonkending @rickcoub
css modules allow for composition.

From the docs

.otherClassName {
  composes: className from "./style.css";
}

I haven't tried this with a 3rd party css lib, it some obvious potential issues, but as long as you had the css somewhere in your project you should be able to path to it and then local "modularized" versions of the bootstrap css.

[brtw]

So it took me a minute, but I solved my problem with the :global syntax suggested by @choonkending . I want to provide my solution for anyone who is stuck on this. @rickcoub?

I couldn't get the syntax that he provided to work, but stumbled on to another similar thread.

:global(.panel-title){ background-color: pink; }

Passing the class you need to modify in the the prens seems to do the trick for me.

Thanks for your help!

[slavab89]

We're cleaning the project of stale issues therefore i'm closing this.
If you still have any issue, please comment here or open a new issue.

Like other people said, you can use the :global option. Another option is to disable the css loader on the specific css files / modules so that they would stay the same as the original. Example such as: import '!style-loader!css-loader!./css/unstyled/bootstap.css';