Question

我看过一些文章建议我必须编辑_custom.scss文件并重新编译bootstrap。但是，我正在通过npm安装bootstrap4。因此，在node_modules中更改bootstrap的内容将是一种非常糟糕的做法。

确切地说，我正在开发Angular4应用程序并使用Angular CLI。

Answer 1

是的，请勿触摸Bootstrap文件。另外，不要在CSS级别覆盖变量，这会创建额外的代码，而且你会让浏览器做额外的工作。

你想要在Sass级别覆盖变量，以便Bootstrap的变量在从Sass转换为CSS时被改变，这样你就不会有两个规则竞争而且你没有被任何加载顺序束缚或特异性战争。

覆盖Bootstrap变量的最简单方法是创建自己的scss文件，让我们称之为main.scss。然后从这里调用自定义变量文件variables.scss然后调用bootstrap核心。所以你的main.scss文件可能看起来像这样;

@import "path-to-npm/bootstrap";
@import "path-to-your-repo/variables";

因为Bootstrap的好人并不总是在他们的变量上使用默认标志，所以这些文件的调用顺序很重要。所以你的variables.scss需要最后调用，可能包含这样的东西;

@dropdown-bg: hotpink;

然后，您可以设置Sass监视任务，监视对main.scss文件的更改，并同时将变量和Bootstrap库转换为一个CSS文件。