react-bootstrap + purgeCss + next.js答案

【问题标题】：react-bootstrap + purgeCss + next.jsreact-bootstrap + purgeCss + next.js
【发布时间】：2020-12-31 01:35:19
【问题描述】：

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;

下一个.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 时一切正常。

更新 1#：

清除其他类工作正常。

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

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

【问题讨论】：

其他引导类是否正常工作，还是只有 .row 和 .col？您是否尝试在配置文件中包含 purgeCSSpaths 的引导路径？
是的，purgeCSSpaths 中的引导路径有效！谢谢老哥！
我已回滚您的编辑。这里不适合将问题的解决方案编辑成问题本身。如果您找到了答案并想分享，请使用下面专为此目的设计的答案空间正确地这样做。有关详细信息，请参阅Can I answer my own question?。此外，请编辑您的问题标题，使其不仅仅是重复标签。您的标题应该以对正在扫描搜索结果的未来网站用户有意义的方式描述您遇到的问题或您提出的问题。
很高兴它有效！如果对您有帮助，请您支持我的评论吗？ :)

标签： reactjs bootstrap-4 next.js react-bootstrap css-purge

【解决方案1】：

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

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

【讨论】：