如何在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') 
);