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

Question

我想在我的 React 元素中使用 bootstrap 4。构建的 css 文件应该只有我在 React 组件中包含的 Bootstrap 类样式。

我不是在搜索 Bootstrap css 类作为 React 组件；我不介意写<div className='container'>

1。 react 带

我试过 reactstrap , 是的，有 bootstrap css 类作为组件(例如 <Container></Container> )，但您必须包含所有 bootstrap 样式:

在src/index.js :

import 'bootstrap/dist/css/bootstrap.css';

2。 Scss源文件

因为我已经有了sass-loader我尝试直接导入 scss 文件:

import bootstrapGrid from 'bootstrap/scss/_grid.scss';
const myComponent = () => <div className={bootstrapGrid.container}>[...]</div>

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

3。其他解决方案:

• react-bootstrap我不需要 react 方式的 js 逻辑(它是 v3)
• styled-bootstrap还是太新了
• bootstrap-css-modules看起来不错，但是没有维护

什么是正确的方向？

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

Answer 1

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

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

或者，首先包含变量和编译网格所需的所有其他模块:

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