如何編譯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

上一篇:Linux系統下mysql運行慢,請給出分析方案!!

下一篇:通達信行業指數代碼