我使用 bootstrap css 和一个用 less 编写的附加模板。我在我的 React 组件的根组件中导入了这两个组件。不幸的是,即使 less 文件是第二个导入的文件,bootstrap 中的样式也会否决 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'
},
最佳答案
在 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')
);
请注意,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')
);
关于css - 如何在 webpack 中以正确的顺序导入样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31028579/