Question

我正在使用webpack来要求 Bootstrap ，所以我从npm安装bootstrap，但我也想通过修改'variables.less'来自定义 Bootstrap ，它会导致问题，下次我从npm升级 Bootstrap 时，我的修改就不见了，所以该怎么办？

Answer 1

您可以在Bootstrap之外的自定义文件中轻松覆盖LESS变量。只要你在导入所有Bootstrap LESS文件后@import带有Bootstrap变量的文件就会覆盖，你就没事了。

Answer 2

在Shane's answer的基础上，我这样做了：

将node_modules/bootstrap/less/bootstrap.less复制到boostrap-custom.less
将该文件放在源代码树中，例如src/style/bootstrap-custom.less
在文件中，创建一个指向bootstrap的less源（一个在node_modules下）的变量，并搜索/替换所有现有的@import指令以指向纠正路径（见下面的例子）。根据需要自定义。
require / import需要的文件：import './style/bootstrap-custom.less';

示例（调整相对路径，注释掉不需要的模块，进行自定义等）：

/* Custom Bootstrap composer */

@BS: "../../node_modules/bootstrap/less";

// Core variables and mixins
@import "@{BS}/variables.less";
@import "@{BS}/mixins.less";

// Reset and dependencies
@import "@{BS}/normalize.less";
@import "@{BS}/print.less";
// Disabling glyphicons for [reasons]
//@import "@{BS}/glyphicons.less";
[...]

@import语句中的变量插值为implemented in Less 1.4.0，所以现在它应该得到支持。

这应该能够存活（次要）更新到bootstrap。当然，如果他们大量更改主.less文件，您可能需要调整或重做它。

自定义从npm安装的Bootstrap

2 个答案: