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

Question

我试图在bootstraps之前包含我的变量，正如许多线程所暗示的那样，没有运气。

例如，我想将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;

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

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

Answer 1

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

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

来自bootstrap-loader docs：

  

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