Twitter bootstrap 如何在不编辑任何引导文件的情况下用SCS覆盖引导4网格？

我可以简单地重新生成网格（或boostrap的任何其他部分）并使用SCS覆盖默认引导设置，而不更改原始引导中的任何文件和变量，以便将来方便地进行更新吗？

在花了一些时间之后，没有找到类似的答案，我想我会与大家分享这样做的步骤：

1） 仅包含云端引导是不够的，比如：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

在主

mystyle.scss

文件中，需要@import引导网格文件：

/* Before your custom variables file, import Bootstrap functions */
@import "../../node_modules/bootstrap/scss/functions";

/* your custom variables file */
@import "mystyle/variables"

/* Import the rest of Boostrap's dependencies */
@import "../../node_modules/bootstrap/scss/mixins/breakpoints";
@import "../../node_modules/bootstrap/scss/mixins/grid-framework";
@import "../../node_modules/bootstrap/scss/mixins/grid";

@import "../../node_modules/bootstrap/scss/grid";
@import "../../node_modules/bootstrap/scss/utilities/display";
@import "../../node_modules/bootstrap/scss/utilities/flex";

/* import the rest of your own project's files ... */

4） 在您自己的变量文件中包含Boostrap生成网格所需的变量：

// Bootstrap 4 grid override

// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1230px
);

@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints);


// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1200px
);

@include _assert-ascending($container-max-widths, "$container-max-widths");


// Grid columns
//
// Set the number of columns and specify the width of the gutters.

$grid-columns:                12;
$grid-gutter-width:           24px;

$enable-grid-classes:       true;

5） 使用

节点sass assets/scss-o assets/css生成css，并在引导css后包含
mystyle.css
，以覆盖其默认值

--奖金--

6） 如果希望
节点scss
查看并自动编译对scss文件的更改，请在项目的
包.json
文件的脚本部分的测试命令下添加一个scss命令，如下所示：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "scss": "node-sass --watch assets/scss -o assets/css"
}

使用
npm运行scss
运行它

有关自动编译的更详细说明是。
Bootstrap在编译期间使用Autoprefixer添加供应商前缀，因此您还应该在将SCS编译为CSS后安装并运行该前缀。通过这种方式，您可以确保更好的跨浏览器兼容性。如果您需要一个示例，我在不久前提出了一个要点：
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "scss": "node-sass --watch assets/scss -o assets/css"
}