Bootstrap 4版本-创建自定义CSS [英] Bootstrap 4 release - create custom css

问题描述

我试图弄清楚如何为B4发布版本构建自定义CSS.我已经下载了源文件，但是没有看到用于v4.alpha6的Gruntfile.js.我在看: V4文档 上面写着:

I am trying to figure out how to build a custom css for B4 released version. I have downloaded source files but don't see a Gruntfile.js that I used for v4.alpha6. I am looking at: V4 doc which says:

如果您需要构建工具，则它们是用于开发Bootstrap及其文档的工具，但是它们可能不适合您自己的目的.

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版本复制了一个，但没有运行.我得到这个:

So, what do I use for my own purposes? How do I build a custom css? I see that I have to create my own _custom.scss file, but I am not sure about the Gruntfile.js. I copied the one from alpha6 version, but it's not running. I am getting this:

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 您的项目.

If you're seeing this message, grunt hasn't been installed locally to your project.

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

However, the same file runs fine for alpha6 version.

有什么主意吗?

谢谢

推荐答案

从Bootstrap 4 Beta开始，他们离开了Gulp和

As of Bootstrap 4 beta, they moved away from Gulp and over to Webpack, but there are other ways you can generate CSS from SASS.

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

To create a custom CSS, you need a SASS compiler such as node-sass or Webpack SASS, or gulp SASS to compile the SCSS to CSS. Then change the whatever SASS variables as needed for the customizations in the custom.scss file . The changes should be made before you @import bootstrap in the custom.scss file to override the default Bootstrap variables.

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

If you prefer not to work directly with the SASS variables, or don't want to set-up your own SASS compiler, there are tools available that make the customization process easier. I created themestr.app which is a custom CSS builder that provides a simple UI to make the changes and generates the custom.scss or custom.css for download.

更多信息:
如何扩展/修改(自定义)Bootstrap 4使用SASS
如何自定义Bootstrap 4

More info:
How to extend/modify (customize) Bootstrap 4 with SASS
How to customize Bootstrap 4

这篇关于Bootstrap 4版本-创建自定义CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！