Overriding bootstrap styles

Hi guys,

This is probably a very stupid question, but …

I’ve imported bootstrap into my create-react-app project as per the documentation (very nice).

However when I look at the generated markup, all the <style> tags for my components e.g. Header.css come before the bootstrap css, which means I can’t (easily) override bootstraps default styling.

Is there a way to ensure bootstrap gets put before other css files?

[viankakrisna]

try to move the css imports above import Routes from './routes'; I think that’s because style-loader reads the css imported from components in Routes first rather than bootstrap. like this

import React from 'react';
import ReactDOM from 'react-dom';
import { browserHistory } from 'react-router';

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

import './index.css';

import Routes from './routes';

ReactDOM.render(
  <Routes history={browserHistory} />,
  document.getElementById('root')
);

And see if it works

[jaredgalanis]

For some reason this is not working for me. The index.js file does look different at this point. There’s no import of Routes.

import 'bootstrap/dist/css/bootstrap.css';

import './index.css';
import './SelectOption.css';

import React from 'react';
import ReactDOM from 'react-dom';

import PlayerContainer from './PlayerContainer';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<PlayerContainer />, document.getElementById('root'));
registerServiceWorker();