如何在不编辑任何引导程序文件的情况下使用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将最新的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）在您自己的变量文件中，包含Bootstrap生成网格所需的变量：

// 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）用node-sass assets/scss -o assets/css生成你的css并在bootstrap css之后包含mystyle.css以取消它的默认值。

- 奖金 -

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

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

用npm run scss运行它。

有关自动编译的更详细说明是in this atricle。