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

Question

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

1。 react-bootstrap

只使用在JSX中导入的组件＆gt;＆gt;覆盖它的样式（哎呀！）

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

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

第3。我可以同时拥有吗？

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

Answer 1

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

  

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

但您不必使用样式的预构建版本（例如来自下载或CDN）。您可以使用customizer from the website或使用Less或Sass自行编译文件。在编译变量文件中的变量之前。

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

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

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

或者在webpack配置中注册加载器，你就可以摆脱less!前缀。

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