Come importare gli stili nell'ordine corretto nel pacchetto web

Question

Uso il cst di avvio e un modello aggiuntivo scritto in meno. Im importazione sia nel componente root del mio componente di reazione. Sfortunatamente gli stili da bootstrap annullano gli stili meno anche se i file meno sono i secondi che vengono importati. C'è un modo per garantire l'ordine degli stili con il webpack.

Questo è sono la componente principale:

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 
); 

questo v'è una parte rilevante delle impostazioni usate:

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

Answer 1

Il problema è che devo usare il plugin ExtractTextPlugin anche per il css parte nelle impostazioni del mio caricatore:

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

Answer 2

riordina l'importazione css nel file index.js:

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') 
); 

nota che index.css viene caricato prima bootstrap.css. dovrebbero essere importati nell'ordine seguente:

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') 
);