如何在不编辑任何引导程序文件的情况下使用 scss 覆盖 Bootstrap 4 网格？

Question

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

Answer 1

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

1) 仅包含来自云的引导程序是不够的，例如：

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

您仍然可以在您的项目中像这样加载它，并在以后覆盖它，但是您将需要 scss 源来生成您自己的网格（以及您想要自定义的任何其他内容）。

2) 如果你还没有这样做，你需要npm init先在你的项目文件夹中设置 package.json。使用 将最新的引导程序安装到项目中npm install bootstrap。您可能还想将npm install node-sass项目的 scss 编译为 css。

3）给定以下文件夹结构：

|
|-- assets
|   |-- css
|   |-- scss
|   |   |-- mystyle
|   |   |   |-- _variables.scss
|   |   |   |-- ...other scss files
|   |   mystyle.scss
|-- node_modules
|   |-- bootstrap
package.json

在您的主mystyle.scss文件中，您需要@import Bootstrap 网格文件：

/* 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) 生成您的 cssnode-sass assets/scss -o assets/css并mystyle.css 在引导 css之后包含以覆盖其默认值。

- 奖金 -

6) 如果你想node-scss观察和自动编译你对 scss 文件的更改，在你的项目文件的脚本部分package.json添加一个scss命令，在test命令下，如下所示：

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

运行它npm run scss。

关于自动编译的更详细解释在这个 atricle 中。