如何编译bootstrap-4.0.0源码

因为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目录下编译出下列文件

|-- 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

• 源码包下载:http://download.csdn.net/detail/super2007/9558340