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

Posted

技术标签:

【中文标题】在 React 中如何只导入需要的 Bootstrap 样式。引导 css 模块?【英文标题】:In React how to import only needed Bootstrap styles. Bootstrap css modules? 【发布时间】:2018-07-20 08:01:23 【问题描述】:

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

我不是在寻找作为 React 组件的 Bootstrap css 类;我不介意写<div className='container'>

1。反应带

我尝试使用reactstrap,是的,有引导 css 类作为组件(例如 <Container></Container>),但您必须包含所有引导样式

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 类。

【问题讨论】:

需要导入Bootstrap的变量。 你找到解决办法了吗? 【参考方案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";

【讨论】:

使用bootstrap/scss/bootstrap-grid.scss 它可以工作,但是我正在导入整个网格。 .container 只是一个例子。一一导入编译失败Argument $color of darken($color, $amount) must be a color。导入变量时,函数和 mixins 似乎不是全局的。 抱歉,Mikel 回复晚了,您所说的“整个网格”是什么意思?它只包括所有进口。您得到的错误是缺少用作参数的$color 变量定义。

以上是关于在 React 中如何只导入需要的 Bootstrap 样式。引导 css 模块?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 webpack 从 React JS 中的外部 JS 文件导入对象

如何制作需要特定导入的混合包 React/React-Native

如何在 React 中使用 materialize-css?

Storybook - 如何使用样式组件(React + TS)从外部项目导入组件?

如何让 React Native 仅在 Android 操作系统上从包中获取/导入功能

使用 Parcel 从 node_modules 导入 CSS