How to import styles in the right order in webpack

Question

I use bootstrap css and an additional template written in less. Im import both in the root component of my react component. Unfortunately the styles from bootstrap overrule the less styles even if the less files are the second ones that are imported. Is there a way to ensure the order of the styles with webpack.

This is are the root component:

import React from "react";
import Dashboard from "./dashboard";
import 'bootstrap/dist/css/bootstrap.min.css'
import '../styles/less/pages.less'

React.render(
  <Dashboard />,
  document.body
);

this is there relevant part of the loader settings:

{
  test: /\.less$/,
  loader: ExtractTextPlugin.extract(
    'css?sourceMap!' +
    'less?sourceMap'
  )
}, {
  test: /\.css$/,
  loader: 'style-loader!css-loader'
},

Answer 1

The problem is that I have to use the ExtractTextPlugin plugin also for the css part in my loader settings:

{
  test: /\.less$/,
  loader: ExtractTextPlugin.extract(
    'css?sourceMap!' +
    'less?sourceMap'
  )
}, 
{
  test: /\.css$/,
  loader: ExtractTextPlugin.extract(
    'css'
  )
},

Answer 2

reorder your css import in index.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-rtl/dist/css/bootstrap-rtl.css';

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

note that index.css is loaded before bootstrap.css. they should be imported in following order:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-rtl/dist/css/bootstrap-rtl.css';
import './index.css';

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