twitter-bootstrap 如何在 webpack 中以正确的顺序导入样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31028579/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to import styles in the right order in webpack
提问by Andreas K?berle
I use bootstrap css and an additional template written in less. Im import both in the root component of my react component. Unfortunately the styles from bootstrap overrule the less styles even if the less files are the second ones that are imported. Is there a way to ensure the order of the styles with webpack.
我使用 bootstrap css 和一个用 less 编写的附加模板。我在我的反应组件的根组件中导入了两者。不幸的是，即使较少的文件是第二个导入的文件，bootstrap 的样式也会覆盖较少的样式。有没有办法确保 webpack 样式的顺序。
This is are the root component:
这是根组件：
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
);
this is there relevant part of the loader settings:
这是加载程序设置的相关部分：
{
test: /\.less$/,
loader: ExtractTextPlugin.extract(
'css?sourceMap!' +
'less?sourceMap'
)
}, {
test: /\.css$/,
loader: 'style-loader!css-loader'
},
采纳答案by Andreas K?berle
The problem is that I have to use the ExtractTextPlugin plugin also for the css part in my loader settings:
问题是我还必须在加载器设置中对 css 部分使用 ExtractTextPlugin 插件：
{
test: /\.less$/,
loader: ExtractTextPlugin.extract(
'css?sourceMap!' +
'less?sourceMap'
)
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(
'css'
)
},
回答by Ali
reorder your css import in index.js file:
在 index.js 文件中重新排序您的 css 导入：
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')
);
note that index.cssis loaded before bootstrap.css. they should be imported in following order:
注意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')
);
