CSS Bootstrap 4 自定义构建生成器/下载

Bootstrap 4 custom build generator / download

提问by Yatko

Does anyone know about an alpha/beta bootstrap 4 custom generator, same that is available for bootstrap 3 at Customize and download?

有谁知道 alpha/beta bootstrap 4 自定义生成器，与在自定义和下载处可用于引导程序 3 的生成器相同？

https://getbootstrap.com/docs/4.0/customize/still unavailable

https://getbootstrap.com/docs/4.0/customize/仍然不可用

回答by Klooven

As discussed here, there will not be a customizer for Bootstrap 4. This means that you'll need to set up build tools for yourself. This is my workflow (in NodeJS):

正如此处所讨论的，Bootstrap 4 将没有定制器。这意味着您需要为自己设置构建工具。这是我的工作流程（在 NodeJS 中）：

1. Create a new project with npm init
2. Install Bootstrap with npm install bootstrap
3. Install build tools. To make this easy and only need to use one command, we'll use scss-powertools (I am the author of it). If you don't want to use it, you have to set up compiling, prefixing, minifying (and linting) yourself. Run: npm install scss-powertools --save-dev
4. Create the SCSS file in a scssfolder (in the root of your project), like scss/name.scss
5. In the SCSS file import Bootstrap with @import "bootstrap/scss/bootstrap";or import the individual componentsas you need them
6. Add a new script to package.json: "build": "scss-powertools scss/name.scss output/compiled.css"
7. Run npm run build, you will find your compiled CSS in output/compiled.css(or whatever you have specified as an option in the build command)

1. 创建一个新项目 npm init
2. 安装引导程序 npm install bootstrap
3. 安装构建工具。为了使这变得简单并且只需要使用一个命令，我们将使用 scss-powertools （我是它的作者）。如果您不想使用它，则必须自己设置编译、添加前缀、缩小（和 linting）。运行：npm install scss-powertools --save-dev
4. 在文件scss夹中（在项目的根目录中）创建 SCSS 文件，例如scss/name.scss
5. 在 SCSS 文件中导入 Bootstrap@import "bootstrap/scss/bootstrap";或根据需要导入单个组件
6. 添加一个新脚本到package.json："build": "scss-powertools scss/name.scss output/compiled.css"
7. 运行npm run build，您将在output/compiled.css（或您在构建命令中指定为选项的任何内容）中找到您编译的 CSS

Notice!scss-powertoolsdoesn't minify by default. To enable it use the --productionflag. You can find all information about it here.

注意！scss-powertools默认情况下不会缩小。要启用它，请使用--production标志。您可以在此处找到有关它的所有信息。

Simple setup can be found from this Gist.

可以从这个Gist 中找到简单的设置。

---

---

You can find my previous workflow here. In it I had to set up everything from compilation to linting manually.

你可以在这里找到我以前的工作流程。在其中，我必须手动设置从编译到 linting 的所有内容。

回答by Jess

Great question! Bootstrap 3 had a customize page as you noted.

好问题！正如您所指出的，Bootstrap 3 有一个自定义页面。

You could use this build tool: https://bootstrap.build/. I'm not sure if it is the replacement for the BS3 customize page or something new. It looks like a nice editor.

您可以使用此构建工具：https: //bootstrap.build/。我不确定它是 BS3 自定义页面的替代品还是新的东西。它看起来像一个不错的编辑器。

Or you could build a custom version of Bootstrap 4 with SASS.

或者您可以使用 SASS 构建自定义版本的 Bootstrap 4。

This link provides more information about making a theme: https://getbootstrap.com/docs/4.0/getting-started/theming/

此链接提供有关制作主题的更多信息：https: //getbootstrap.com/docs/4.0/getting-started/theming/

回答by johna

It doesn't look like the Bootstrap team are going to offer a customizer like in v3.

看起来 Bootstrap 团队不会像 v3 那样提供定制器。

As mentioned in other answers, bootstrap.buildexists and has a very nice UI and gives access to most of the variables and options. Unfortunately it doesn't appear to being updated as quick as the Bootstrap team are releasing updates.

正如其他答案中提到的，bootstrap.build存在并且有一个非常好的用户界面，并且可以访问大多数变量和选项。不幸的是，它似乎没有像 Bootstrap 团队发布更新那样快速更新。

upgrade-bootstrap.bootply.comis another option but doesn't give any indication as to which v4 version is being used. It has only limited access to variables and options.

upgrade-bootstrap.bootply.com是另一种选择，但没有给出任何关于正在使用哪个 v4 版本的指示。它只能有限地访问变量和选项。

bootstrapcustomizer.comprovides full access to all variables and options and is kept up-to-date with v4 releases. It's not as nice a UI as bootstrap.build but works.

bootstrapcustomizer.com提供对所有变量和选项的完全访问，并与 v4 版本保持同步。它的 UI 不如 bootstrap.build 好，但可以工作。

(Disclosure: I created bootstrapcustomizer.com)

（披露：我创建了 bootstrapcustomizer.com）