如何在webpack中以正确的顺序导入样式

Question

我使用bootstrap css和用less编写的附加模板。我导入两个在我的反应组件的根组件。不幸的是，即使较少的文件是第二个被导入的文件，引导的样式也会推翻较少的样式。有没有一种方法可以确保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' 
}, 

Answer 1

的问题是，我也必须使用ExtractTextPlugin插件的CSS部分在我的装载机设置：

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

Answer 2

重新排序您的css导入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') 
); 

请注意，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') 
);