react-bootstrap + purgeCss + next.js [英] react-bootstrap + purgeCss + next.js
问题描述
PurgeCss 删除了我项目中使用的 react-bootstrap css 类.我正在使用 Next.js 框架.
PurgeCss removes react-bootstrap css classes used in my project. I am using Next.js framework.
_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:
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:
// 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 时一切正常.
When I build the app, .row
classes and .col
classes are completely missing in the CSS file. When disabling PurgeCSS everything works fine.
更新 1#:
清除其他类工作正常.
在 <div>
中定义 Bootstrap 类可以正常工作.:
Defining Bootstrap classes inside <div>
work fine.:
<button className="btn btn-primary"> // this works fine!
My Button
</button>
其他 React-bootstrap 组件也不起作用.这不起作用!
Other React-bootstrap components dont work either. This doesnt work!
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.
You should include the path of the bootstrap CSS file to your purgeCSSpath on the config file.
'./node_modules/react-bootstrap/**/*.js',
这篇关于react-bootstrap + purgeCss + next.js的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!