Cách nhập kiểu theo đúng thứ tự trong gói web

Question

Tôi sử dụng css bootstrap và một mẫu bổ sung được viết ít hơn. Im nhập cả trong thành phần gốc của thành phần phản ứng của tôi. Thật không may, các kiểu từ bootstrap đè lên các kiểu ít hơn ngay cả khi các tệp ít hơn là các kiểu thứ hai được nhập vào. Có cách nào để đảm bảo thứ tự các kiểu với webpack không.

Đây là những thành phần gốc:

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

này là có một phần liên quan của các thiết lập bộ nạp:

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

Answer 1

Vấn đề là tôi phải sử dụng plugin ExtractTextPlugin cũng cho css một phần trong cài đặt bộ nạp của tôi:

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

Answer 2

sắp xếp lại việc nhập css của bạn trong tệp 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') 
); 

lưu ý rằng index.css được tải trước bootstrap.css. chúng phải được nhập theo thứ tự sau:

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