我的应用程序使用引导 css 和本地自定义 css。问题是 webpack 的输出在 bootstrap css 之前包含了一些本地 css,并且在它之后包含了一些 css,尽管我的所有应用程序在引导后都导入了本地 css。有没有办法在引导 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]'
),
}
);
[组件.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);
[部分.lcss]
.caption {
font-size: 60px;
color: #fff;
}