自定义从 npm 安装的 Bootstrap答案

【问题标题】：Customize Bootstrap installed from npm自定义从 npm 安装的 Bootstrap
【发布时间】：2015-08-26 02:46:10
【问题描述】：

我使用 webpack 需要 Bootstrap，所以我从 npm 安装 bootstrap，但我也想通过修改 'variables.less' 来自定义 Bootstrap，这会导致问题，下次我从npm升级Bootstrap时，我的修改已经没有了，我该怎么办呢？

【问题讨论】：

标签： twitter-bootstrap npm webpack

【解决方案1】：

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

【讨论】：

我有一个问题。如果你想完全删除 _typo.scss 怎么办？我应该创建一个空文件 _typo.scss 还是什么？ tnx
在导入所有其他文件的主 bootstrap.less 文件中，您可以删除或注释掉导入 _typo.less 的行。
你的意思是在 node_module 中吗？还是在哪里？
我不建议直接在 node_modules 中编辑文件，因为您的编辑将在您更新该软件包时被覆盖。但是您可以从 node_modules 复制 bootstrap.less 并将其放入要从那里导入的站点文件中（确保更新 bootstrap.less 中的导入路径，因为它们是相对的）。然后您可以准确控制引导程序的哪些部分被导入或不导入。

【解决方案2】：

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

将node_modules/bootstrap/less/bootstrap.less复制到boostrap-custom.less
将该文件放在源代码树中，例如 src/style/bootstrap-custom.less
在文件中，创建一个指向引导程序的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，所以现在应该到处都支持它。

这应该可以在引导程序的（次要）更新中继续存在。当然，如果他们大量更改主要的 .less 文件，您可能需要调整或重做它。

【讨论】：