Bootstrap 4 发布 - 创建自定义 css答案

【问题标题】：Bootstrap 4 release - create custom cssBootstrap 4 发布 - 创建自定义 css
【发布时间】：2019-02-12 21:54:33
【问题描述】：

我正在尝试弄清楚如何为 B4 发布版本构建自定义 css。我已经下载了源文件，但没有看到我用于 v4.alpha6 的 Gruntfile.js。我在看： V4 doc 其中说：

如果您需要构建工具，它们包含在开发 Bootstrap 及其文档中，但它们可能不适合您自己的目的。

那么，我将什么用于我自己的目的？如何构建自定义 CSS？我看到我必须创建自己的_custom.scss 文件，但我不确定Gruntfile.js。我从 alpha6 版本复制了一个，但它没有运行。我得到了这个：

D:\Bootstrap4\bootstrap-4.0.0>grunt
grunt-cli: The grunt command line interface (v1.2.0)

Fatal error: Unable to find local grunt.

如果您看到此消息，则表示 grunt 尚未在本地安装到你的项目。

但是，对于 alpha6 版本，相同的文件运行良好。

有什么想法吗？

谢谢

【问题讨论】：

标签： npm gruntjs bootstrap-4

【解决方案1】：

从 Bootstrap 4 测试版开始，他们不再使用 Gulp 和 over to Webpack，但还有其他方法可以从 SASS 生成 CSS。

要创建自定义 CSS，您需要一个 SASS 编译器，例如 node-sass 或 Webpack SASS，或 gulp SASS 将 SCSS 编译为 CSS。然后根据需要更改 SASS variables 中的任何内容以进行 custom.scss 文件中的自定义。应该在 @import bootstrap 之前在 custom.scss 文件中进行更改，以覆盖默认的 Bootstrap 变量。

如果您不想直接使用 SASS 变量，或者不想设置自己的 SASS 编译器，可以使用一些工具来简化自定义过程。我创建了 themestr.app，这是一个自定义 CSS 构建器，它提供了一个简单的 UI 来进行更改并生成 custom.scss 或 custom.css 以供下载。

【讨论】：

请提供这些其他方式的任何文档？
我在回答中详细说明了

【解决方案2】：

正如ZimSystem 所说，Webpack 是 Bootstrap 的新发展方向。我发现，在点击跳转后，文档有点缺乏。

更多挖掘使我找到了https://github.com/twbs/bootstrap/issues/24370 和问题作者的 repo https://github.com/xdvarpunen/webpackboot，其中包含使用 sass、npm webpack 和 bootstrap 所需的内容。

【讨论】：