如何在使用 bootstrap-loader 的 Angular 2 项目中覆盖 bootstraps sass 变量？答案

【问题标题】：How can I override bootstraps sass variables in an Angular 2 project which uses bootstrap-loader?如何在使用 bootstrap-loader 的 Angular 2 项目中覆盖 bootstraps sass 变量？
【发布时间】：2016-11-18 13:47:59
【问题描述】：

正如许多线程所建议的那样，我尝试在引导之前包含我的变量，但没有运气。

比如我想把bootstraps最大屏幕断点的宽度改成1980px

我的app.component.ts 看起来像这样：

@import './src/app/shared/styles/_variables'; // My own variables
@import '~bootstrap-sass/assets/stylesheets/bootstrap/_variables';

该列表中的第一个文件，即我自己的包含 ovverides 的文件 ./src/app/shared/styles/_variables，如下所示：

$container-large-desktop: 1980px;
$screen-lg-min: 1980px;

但是引导程序最大屏幕的断点仍然保持在 1200 像素。

我正在使用一个使用 Webpack 的 Angular2 种子项目，我使用 bootstrap-loader npm 包来加载 Bootstrap

【问题讨论】：

您自己的文件不应该低于引导文件以覆盖引导程序的任何默认值吗？我认为在您的情况下，引导程序会覆盖您自己的变量。
不。虽然我也试过了。 Bootstrap 用 !default 定义了它们的所有变量，这意味着这些变量将被使用，除非之前已经定义了变量。
好的，那我猜，请将此信息添加到您的问题中。
你能改变引导文件中的变量吗？而不是自己覆盖它。还是担心更新bootstrap时会被覆盖？
是的，我不想破解 Bootstraps 自己的文件。然后我将无法更新它，而且它的标准很差，我想学习以正确的方式去做。

标签： twitter-bootstrap angular sass webpack

【解决方案1】：

因为，我使用 bootstrap-loader 来加载引导程序，显然在我的应用程序的根目录中创建了一个 .bootstraprc 文件。

要覆盖引导程序默认变量，我必须在该文件中添加以下内容： preBootstrapCustomizations: ./src/app/shared/styles/_variables.scss

来自引导加载程序文档：

preBootstrapCustomizations：自定义在原始变量之前导入的 Bootstrap 变量引导变量。因此，派生的 Bootstrap 变量可以依赖于来自这里的价值观。有关示例，请参见 Bootstrap _variables.scss 文件派生的 Bootstrap 变量。

【讨论】：