twitter-bootstrap - 如何在不编辑任何 Bootstrap 文件的情况下使用 scss 覆盖 Bootstrap 4 网格？

Question

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

Answer 1

在这方面花了一些时间，但没有找到类似的答案，我想我会分享一下做这件事的步骤:

1) 仅包含来自云的 Bootstrap 是不够的:

<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) 在您自己的变量文件中，包含 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) 使用 node-sass assets/scss -o assets/css 生成您的 css 并在 Bootstrap css 之后包含 mystyle.css覆盖其默认值。

--奖金--

6) 如果您希望 node-scss 监视并自动编译您对 scss 文件所做的更改，请在项目的 包的 scripts 部分中。在.json文件中添加scss命令，在test命令下，如下图:

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

使用 npm run scss 运行它。

关于自动编译更详细的解释是in this atricle .