Question

现在，我拥有所有未修改的引导程序文件，这些文件是用于自定义的副本。

这些文件夹：

->引导程序
->自定义（上面的副本）

我首先包含boostrap文件，然后包含自定义文件，这些文件现在是确切的副本。

假设我开始在“自定义”中更改值以获取所需的外观。然后，我通过更新bootstrap文件夹将boostrap更新到新版本。即使以前根本没有更改CSS规则，但由于以前的版本基本上已复制到“自定义”，因此可能不会进行很多更改。

这是正确的方法吗？还是应该尝试其他方法？

Answer 1

有两种方法可以做到这一点

首先，我需要了解您的项目文件夹结构，我建议这样做

dist
 -/css
   -/styles.css
src
 -/scss
   -styles.scss
   -/bootstrap
      -bootstrap.scss (taken from the scss folder)
      -_variables.scss (taken from the scss folder)

使用此结构，您的项目仅需要styles.scss，它将导入其下面的bootstrap文件夹，然后编译到dist文件夹中以输出CSS（如果您知道如何做，我会建议为此使用webpack或gulp）

主要的问题在于，bootstrap.scss文件的设置如下所示（在本示例中，我使用的是node_modules，因为我已经使用npm将bootstrap导入了我的项目。但这是文件所在位置的相对路径。，因此使您指向相同文件的路径与构建项目的方式正确）

Bootstrap.scss

请注意，变量文件指向的是本地文件，而不是主repo文件夹中的文件。

/*!
 * Bootstrap v4.2.1 (https://getbootstrap.com/)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

@import "./node_modules/bootstrap/scss/functions";
@import "../bootstrap/_variables.scss";
/*@import "./node_modules/bootstrap/scss/variables.scss";*/
@import "./node_modules/bootstrap/scss/mixins";
@import "./node_modules/bootstrap/scss/root";
@import "./node_modules/bootstrap/scss/reboot";
@import "./node_modules/bootstrap/scss/type";
@import "./node_modules/bootstrap/scss/images";
@import "./node_modules/bootstrap/scss/code";
@import "./node_modules/bootstrap/scss/grid";
@import "./node_modules/bootstrap/scss/tables";
@import "./node_modules/bootstrap/scss/forms";
@import "./node_modules/bootstrap/scss/buttons";
@import "./node_modules/bootstrap/scss/transitions";
@import "./node_modules/bootstrap/scss/dropdown";
@import "./node_modules/bootstrap/scss/button-group";
@import "./node_modules/bootstrap/scss/input-group";
@import "./node_modules/bootstrap/scss/custom-forms";
@import "./node_modules/bootstrap/scss/nav";
@import "./node_modules/bootstrap/scss/navbar";
@import "./node_modules/bootstrap/scss/card";
@import "./node_modules/bootstrap/scss/breadcrumb";
@import "./node_modules/bootstrap/scss/pagination";
@import "./node_modules/bootstrap/scss/badge";
@import "./node_modules/bootstrap/scss/jumbotron";
@import "./node_modules/bootstrap/scss/alert";
@import "./node_modules/bootstrap/scss/progress";
@import "./node_modules/bootstrap/scss/list-group";
@import "./node_modules/bootstrap/scss/close";
@import "./node_modules/bootstrap/scss/toasts";
@import "./node_modules/bootstrap/scss/modal";
@import "./node_modules/bootstrap/scss/tooltip";
@import "./node_modules/bootstrap/scss/popover";
@import "./node_modules/bootstrap/scss/carousel";
@import "./node_modules/bootstrap/scss/spinners";
@import "./node_modules/bootstrap/scss/utilities";

Styles.scss

这是您需要填写的文件，然后将输出您的自定义CSS

@import 'bootstrap/bootstrap.scss';

variables文件，只要您从正在使用的repo版本中复制了该文件（与各种版本一样重要，如果使用的版本不正确，则对于不存在的变量将产生compliy错误）应该能够自定义引导程序的颜色，断点，列，行等，以使引导程序以您所需的方式显示。

自定义引导程序主题的正确方法（使用SCSS源文件）

1 个答案: