为什么webpack在boostrap css之前输出本地css?

时间:2016-05-13 07:40:52

标签: reactjs webpack css-loader

我的应用使用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;
}

0 个答案:

没有答案