Как импортировать стили в правильном порядке в webpack

Я использую bootstrap css и дополнительный шаблон, написанный меньше. Im импортирует оба компонента в корневой компонент моего компонента react. К сожалению, стили из bootstrap отменяют меньше стилей, даже если меньше файлов являются вторыми, которые импортируются. Есть ли способ обеспечить порядок стилей с помощью webpack.

это корневой компонент:

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

это есть соответствующая часть настроек загрузчика:

{
  test: /.less$/,
  loader: ExtractTextPlugin.extract(
    'css?sourceMap!' +
    'less?sourceMap'
  )
}, {
  test: /.css$/,
  loader: 'style-loader!css-loader'
},
11
css less reactjs twitter-bootstrap webpack

2 ответов

проблема в том, что я должен использовать плагин ExtractTextPlugin также для части css в настройках моего загрузчика:

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

измените порядок импорта css в индексе.файл 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')
);

отметим, что index.css загружается перед bootstrap.css. они должны быть импортированы в следующем порядке:

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