Bootstrap4 本地編譯運行

Step1. 獲取Bootstrap源代碼

  1 https://github.com/twbs/bootstrap

Step2. 進入目錄並切換npm源

  1  npm --registry https://registry.npm.taobao.org     // 淘寶鏡像
  2  npm config get registry    // 查看當前鏡像

換源是爲了不天朝防火牆及網速等致使部分資源沒法成功下載，例如hugo可能就一直卡住，最後出現問題：

  1 npm ERR! bootstrap@4.3.1 docs-build: `hugo --cleanDestinationDir`

安裝完成後，再安裝Ruby[我安裝的是Ruby+Devkit 2.6.5-1(*64)]，安裝Ruby的緣由是運行scss須要Ruby環境~

Step3. 安裝Ruby

下載地址：https://rubyinstaller.org/downloads/

右邊英文我翻譯下：

  1 要下載哪一個版本？
  2 若是您不知道要安裝哪一個版本，而且開始使用Ruby，建議您使用Ruby + Devkit 2.6.X（x64）安裝程序。它提供了最多數量的兼容gem，並與Ruby一塊兒安裝了MSYS2-Devkit，所以能夠當即編譯具備C擴展名的gem。僅當必須使用自定義32位本機DLL或COM對象時，才建議使用32位（x86）版本。

而後安裝：

不要問我下面那個895M的要不要勾，也不要去百度勾不勾，勾就完事了，反正公司電腦內存大~，不選可能致使之後少這少那的 ，又不能保證之後會不會出現缺乏包等問題，出了問題又得去百度，百度又不必定能很快找到答案，就是勾

安裝Ruby後，會出現一個黑窗：

繼續翻譯下：

  1 Which components shall be installed? If unsure press ENTER []
  2 應安裝哪些組件？若是不肯定，請按ENTER[]

我的建議繼續按回車，反正公司電腦內存大~，不選可能致使之後少這少那的

而後能夠摸會魚，須要點時間 ，安裝完成後也會出現這行提示，回車就正式安裝完成了，黑窗口自動關閉

 

Step4. 進入項目目錄安裝捆綁機

  1 gem install bundler
  2 bundle install

這個我也不知道爲何要安裝，文檔上這麼寫的: https://www.php.cn/manual/view/34065.html 

而後運行到一半就掛了 ，此時緣由是防火牆~，

出錯：(找不到Gemfile文件)

  1 Could not locate Gemfile

解決：(從新生成一個Gemfile文件)

  1 bundle -h
  2 bundle init

 

Step5. OK

此時能夠運行package.json裏的各類命令了 ，先試下github bootstrap第二個命令【測試】，試下能不能正常運行：

  1 npm run test

此時一片代碼嘩啦啦的往上飄

運行結果：

Java is missing是否是似曾相識 ，我繼續翻譯下：

  1 正在跳過vnu jar測試；缺乏Java。
  2 在4.708秒內成功掃描了481個連接。

缺乏Java環境，仍是老老實實敲代碼吧~

  1 npm start     // 此次摸着良心和你說絕對有用！

ok了，如今能夠在編譯運行敲代碼了， //  看着個人表情~

先在\scss\_nav.scss試試：將paddind-left改爲9990px，而後保存

接着下面又是一片代碼飄過~，而後去dist/css/bootstrap.css裏面看下有沒有變化：(記得ctrl+f查找nav)

完成，搞定~  (這表情絕對絕對沒惡意，，)

 

.