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

Question

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

<强>1。 react 引导

只需使用 JSX 中导入的组件 >> 覆盖它的样式(恶心!)

<强>2。引导加载程序( https://github.com/shakacode/bootstrap-loader )

参数化样式，但用 HTML 编写组件(恶心!)

<强>3。我可以两者都拥有吗？

如何在 JSX 中编写引导组件，同时自定义这些基本引导变量，这样我就可以避免诸如覆盖基本引导导航栏中的样式之类的事情？

Answer 1

React Bootstrap 不 ship with styles 。您必须插入自己的样式。然而 React Bootstrap 并不依赖于 jQuery。

Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included css. However, some stylesheet is required to use these components. How and which bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the 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! 前缀。

希望这对您有帮助，欢迎询问。