React-Bootstrap + PurgeCSS + Next.js

Question

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',
      ],
    })
  )
);

当我构建应用程序时，.row类和.col类在CSS文件中完全丢失。禁用PurgeCSS后一切正常。

更新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;

- bobo

---

其他的Bootstrap类是否有效，还是只有.row和.col？你尝试将Bootstrap路径包含到配置文件的purgeCSS路径中了吗？ - ASG

是的，在 purgeCSS 路径中使用 bootstrap 路径有效！谢谢，伙计！ - bobo

我已经撤销了你的编辑。在问题本身中编辑解决方案是不合适的。如果你找到了答案并想分享，可以使用下面专门为此设计的回答空间进行正确的分享。更多信息请参见我可以回答自己的问题吗？。另外，请编辑你的问题标题，使其不仅仅是标签的重复。你的标题应该以一种对未来站点用户有意义的方式描述你遇到的问题或提出的问题，这样扫描搜索结果的用户就能理解。 - Ken White

很高兴它能够正常工作！如果我的评论对您有帮助，请给我点赞好吗？ :) - ASG

Answer 1

在配置文件中，您应该将Bootstrap CSS文件的路径包含在purgeCSSpath中。

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

- ASG