如何自定义变量以防止覆盖样式？

Question

我一直在研究将Bootstrap轻松包含到我的项目中的替代方法，我对解决方案不满意。 选项：

反应引导

只需使用JSX中导入的组件>>覆盖它的样式（哎呀！）

2. bootstrap-loader（ https://github.com/shakacode/bootstrap-loader ）

参数化样式，但用HTML编写组件（哎呀！）

我可以同时拥有两个吗？

如何在JSX中编写引导程序组件，但是可以自定义这些基本的引导程序变量，这样我就可以避免在基本引导程序导航栏中覆盖样式等问题？

Answer 1

React Bootstrap不附带样式 。 您必须插入自己的样式。 但是，React Bootstrap不依赖于jQuery。

因为React-Bootstrap不依赖于非常精确的Bootstrap版本，所以我们不附带任何包含的CSS。 但是，某些样式表需要使用这些组件。 您包含的样式和引导样式取决于您，但最简单的方法是包含CDN中的最新样式。

但是您不必使用样式的预构建版本（例如从下载或CDN）。 您可以使用网站上的自定义程序或使用Less或Sass自行编译文件。 在编译之前编辑变量文件中的变量。

根据您的设置，您可以使用加载程序来处理文件。 Webpack示例：

// es5
require('less!./path/to/style.less');

// es2015 modules
import 'less!./path/to/style.less';

或者在你的webpack配置中注册加载器，你可以摆脱less! 字首。

希望这对你有所帮助，随时问。