我的应用使用bootstrap css和本地自定义css。问题是webpack的输出包括一些本地css在引导css之前,一些在它之后,虽然我的所有app都在引导后导入本地css。有没有办法在bootstrap css之后放置所有自定义css?
[webpack.config.js]
config.module.loaders.push({
....
{ test: /\.css$/, loader: 'style!css' },
{
test: /\.lcss$/,
loader: ExtractTextPlugin.extract(
'style',
'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
),
}
);
[component.js]
import React from 'react';
import { Button, Col, Row } from 'react-bootstrap';
import _ from 'lodash';
import CSSModules from 'react-css-modules';
import styles from './HeroSection.lcss';
class Section extends React.Component {
render() {
return (
<div className="section text-center">
<Row>
<Col xs={12} className={styles.caption}>
Hello, Why !!
</Col>
<br />
<br />
<Button bsStyle="primary" href="#about">Learn more</Button>
</Row>
<img src="/assets/images/baseline.png" alt="baseline" />
</div>
);
}
}
export default CSSModules(Section, styles);
[section.lcss]
.caption {
font-size: 60px;
color: #fff;
}