如何在使用bootstrap-loader的Angular 2项目中重写bootstraps sass变量？

我试过在bootstraps之前加入我的变量，因为很多线程都提示没有运气。如何在使用bootstrap-loader的Angular 2项目中重写bootstraps sass变量？

例如，我要白手起家大屏幕断点的宽度改为1980px

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

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

在该列表中的第一个文件，这是我自己的文件./src/app/shared/styles/_variables包含ovverides看起来像这样：

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

但是bootstraps的断点最大屏幕仍然保持在1200px。

我使用它使用的WebPack一个Angular2种子项目，我使用自举装载机NPM包加载自举

2016-11-18 Weblurk

如果你自己的文件不在bootstrap文件下面以覆盖bootstrap的默认值？我认为在你的情况下，引导覆盖你自己的变量。 –

不是。虽然我也尝试过。 Bootstrap使用！default来定义它们的所有变量，这意味着除非变量先前已被定义，否则将使用这些变量。 – Weblurk

好的，那么我想，请将这个信息添加到您的问题。 –

由于，我使用的自举加载器加载自举，显然.bootstraprc文件被创建在我的应用程序的根源。

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

从引导加载程序文档：

preBootstrapCustomizations：在此之前得到进口自定义引导变量原始 Bootstrap变量。因此，派生的Bootstrap变量可以取决于来自这里的值。有关派生Bootstrap变量的示例，请参阅Bootstrap _variables.scss文件。

2016-11-18 14:32:22 Weblurk

回答