0

我的应用程序使用引导 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;
}
4

0 回答 0