如何编译bootstrap-4.0.0源码

最新推荐文章于 2025-05-22 08:33:43 发布

原创最新推荐文章于 2025-05-22 08:33:43 发布 · 置顶 · 4.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #4.0.0 #源码

本文介绍如何为Bootstrap 4.0搭建Sass开发环境，包括安装Ruby、SASS插件、Node.js及Grunt等工具，并提供手动编译CSS的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为bootstrap 4.0.0将放弃less转用sass来处理css，所以开发环境需要装SASS插件（必须先安装Ruby）。

安装Ruby，略。
安装SASS

gem install sass

安装Node.js，略。
安装grunt

npm install -g grunt

安装node-sass，大多数环境正常。安装不成功的话可以看后面的手动编译css部分。

npm install -g node-sass

grunt打包，加强制参数

grunt --force

|-- dist
   |-- css
      |-- bootstrap.css
      |-- bootstrap.css.map
      |-- bootstrap.min.css
      |-- bootstrap.min.css.map
   |-- js 
      |-- bootstrap.js
      |-- bootstrap.min.js
      |-- npm.js
      |-- umd
         |-- alert.js
         |-- button.js
         |-- carousel.js
         |-- collapse.js
         |-- dropdown.js
         |-- modal.js
         |-- popover.js
         |-- scrollspy.js
         |-- tab.js
         |-- tooltip.js
         |-- util.js

scsslint检查时可能会报错，可以将bundleExcc关掉，不用本地的

//You can choose to have your gems installed via bundler and if so, set this option to true to use the local gems.
    scsslint: {
      options: {
        bundleExec: false,
        config: 'scss/.scss-lint.yml',
        reporterOutput: null
      },
      src: ['scss/*.scss', '!scss/_normalize.scss']
    }

手动编译css，进入scss目录会看到大量的scss文件。主要关注下面几个

|-- scss
   |-- ...
   |-- bootstrap.scss
   |-- bootstrap-flex.scss
   |-- bootstrap-grid.scss
   |-- bootstrap-reboot.scss
   |-- ...

可以用sass命令直接生成相应的css文件和map文件

sass bootstrap.scss bootstrap.css
sass bootstrap-flex.scss bootstrap-flex.css
sass bootstrap-grid.scss bootstrap-grid.css
sass bootstrap-reboot.scss bootstrap-reboot.css