react-bootstrap + purgeCss + next.js

如何解决react-bootstrap + purgeCss + next.js

PurgeCss删除了我的项目中使用的react-bootstrap css类。我正在使用Next.js框架。

_app.js：

import '../styles/style.scss';
import React from 'react';
import PropTypes from 'prop-types';
import 'bootstrap/dist/css/bootstrap.min.css';

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({Component,pageProps}) {
  return <Component {...pageProps} />;
}

MyApp.propTypes = {
  Component: PropTypes.node,pageProps: PropTypes.node,};

component.js：

import React from 'react';
import {Container,Row,Col} from 'react-bootstrap';

const MyTest = function () {
  return (
    <Container>
      <Row>                   // .row class is missing in the final CSS!
        <Col>1 of 2</Col>
        <Col>2 of 2</Col>
      </Row>
      <Row>
        <Col>1 of 3</Col>
        <Col>2 of 3</Col>
        <Col>3 of 3</Col>
      </Row>
    </Container>
  );
};

export default MyTest;

next.config.js：

// next.config.js
const withSass = require('@zeit/next-sass');
const withCss = require('@zeit/next-css');
const withPurgeCss = require('next-purgecss');

module.exports = withCss(
  withSass(
    withPurgeCss({
      generateBuildId: async () => {
        // You can,for example,get the latest git commit hash here
        return 'my-build-id3';
      },distDir: 'build',purgeCsspaths: [
        './src/pages/*.js','./src/pages/**/*.js','./src/components/*.js','./src/components/**/*.js','./src/layouts/*.js','./src/layouts/**/*.js',],})
  )
);

构建应用程序时，CSS文件中完全缺少.row类和.col类。禁用PurgeCSS时，一切正常。

UPDATE 1＃：

清除其他类效果很好。

在<div>中定义Bootstrap类可以正常工作。：

 <button className="btn btn-primary">     // this works fine!
          My Button
 </button>

其他React-bootstrap组件也不起作用。这不起作用！

import React from 'react';
import {Button} from 'react-bootstrap';

const MyTest = function () {
  return <Button variant="outline-warning">Primary button</Button>;    // doesnt work
};

export default MyTest;

解决方法

您应该将引导CSS文件的路径包含到配置文件中的purgeCSSpath中。

'./node_modules/react-bootstrap/**/*.js',