Bootstrap 4 发布 - 创建自定义 css

Question

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

Should you require build tools, they are included for developing Bootstrap and its docs, but they’re likely unsuitable for your own purposes.

那么，我用什么来达到我自己的目的呢？如何构建自定义 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 版本运行良好。

有什么想法吗？

谢谢

Answer 1

从 Bootstrap 4 beta 开始，它们不再使用 Gulp 和 over to Webpack，但是您可以通过其他方式从 SASS 生成 CSS .

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

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

更多信息：

How to customize Bootstrap 4

Answer 2

正如 ZimSystem 所述，Webpack 是 Bootstrap 的新发展方向。我发现，跳转之后，文档有点欠缺

更多挖掘让我找到了 https://github.com/twbs/bootstrap/issues/24370 and the issue author's repo https://github.com/xdvarpunen/webpackboot，其中包含您需要使用 sass、npm webpack 和 bootstrap.

的内容

Bootstrap 4 发布 - 创建自定义 css

Bootstrap 4 release - create custom css

npm

gruntjs

bootstrap-4