在React中如何只导入所需的Bootstrap样式。 Bootstrap css模块？

Question

我想在我的React项目中使用bootstrap 4。 构建的css文件应该只包含我在React组件中包含的引导类样式。

我不是在寻找Bootstrap css类作为React组件;我不介意写a_category no yes A1 10 15 A2 20 22 A3 11 16 A4 12 26

1。 Reactstrap

我尝试使用reactstrap，并且是将bootstrap css类作为组件（例如<div className='container'>），但您必须包含所有引导样式：

在<Container></Container>：

src/index.js

2。 Scss源文件

因为我已经import 'bootstrap/dist/css/bootstrap.css'; 我尝试直接导入scss文件：

sass-loader

但它失败了，因为它没有足够的数据来编译：

3。其他解决方案：

• react-bootstrap我不需要反应方式的js逻辑（并且它是v3）
• styled-bootstrap还是太新了
• bootstrap-css-modules似乎很好，但它没有维护

正确的方向是什么？

或者我应该去purifycss-webpack清理我的应用程序？并删除未使用的CSS类。

Answer 1

您可以执行以下操作，其中应包括仅编译网格的所有必要模块：

import bootstrapGrid from 'bootstrap/scss/bootstrap-grid.scss';

或者，首先包括变量＆amp;编译网格所需的所有其他模块：

import bootstrapFunctions from 'bootstrap/scss/_functions';
import bootstrapVariables from 'bootstrap/scss/_variables';
import bootstrapMixinBreakpoints from 'bootstrap/scss/mixins/_breakpoints';
import bootstrapMixinGridFramework from 'bootstrap/scss/mixins/_grid-framework';
import bootstrapMixinGrid from 'bootstrap/scss/mixins/_grid';
import bootstrapGrid from 'bootstrap/scss/_grid.scss';
import bootstrapUtilitiesDisplay from 'bootstrap/scss/utilities/_display';
import bootstrapUtilitiesFlex from 'bootstrap/scss/utilities/_flex';

您可以从bootstrap-grid.scss文件@imports中检查需要哪些模块：

@import "functions";
@import "variables";

@import "mixins/breakpoints";
@import "mixins/grid-framework";
@import "mixins/grid";

@import "grid";
@import "utilities/display";
@import "utilities/flex";