Bootstrap 4 release - create custom css

问题:

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:

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

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.

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

However, the same file runs fine for alpha6 version.

Any idea?

Thanks

回答1:

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.

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.

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.

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

回答2:

As ZimSystem stated, Webpack is the new way forward with Bootstrap. I found, after hitting the jump, the documentation was a bit lacking.

More digging led me to https://github.com/twbs/bootstrap/issues/24370 and the issue author's repo https://github.com/xdvarpunen/webpackboot which has what you need to get going with sass, npm webpack and bootstrap.