Ionic3 + BS4 + FA5

บทความนี้บันทึกวิธีเพิ่ม Bootstrap 4 (BS4) และ Font-Awesome 5 (FA5) เข้าไปในโปรเจคที่พัฒนาบน Ionic3

Check List

• ติดตั้ง Library ที่จำเป็นทั้งหมด
• ก็อปปีไฟล์ Asset ที่จำเป็นทั้งหมด ไปที่ /www
• เพิ่มไฟล์ scss ที่เกี่ยวข้องทั้งหมดลงในกระบวนการ Compile ของ SASS
• ทำให้ build script ของ ionic รวมสคริปต์, stylesheet และ asset ของ BS4 และ FA5 เข้าในโปรเจค

ติดตั้ง Library ที่จำเป็นทั้งหมด

ติดตั้ง Library ที่จำเป็นผ่าน npm

$ npm i --save bootstrap@4.1.3
$ npm i --save @fortawesome/fontawesome-free
$ npm i --save jquery@latest
$ npm i --save @types/jquery # ถ้าต้องการใช้ jQuery ใน ionic ด้วย

ก็อปปีไฟล์ Asset ที่จำเป็นทั้งหมด ไปที่ /www

เพิ่มสคริปต์สำหรับก็อปปีไฟล์ด้านล่างนี้ลงใน app-script ของ ionic  ดูรายละเอียดเพิ่มเติมที่นี่

module.exports = {
  ...,
  copyBootstrap: {
    src: [
      '{{ROOT}}/node_modules/jquery/dist/jquery.min.js',
      '{{ROOT}}/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js'
    ],
    dest: '{{WWW}}/assets/js'
  },
  copyFontAwesome: {
    src: ['{{ROOT}}/node_modules/@fortawesome/fontawesome-free/webfonts/**/*'],
    dest: '{{WWW}}/assets/fonts'
  }
}

เพิ่มไฟล์ scss ที่เกี่ยวข้องทั้งหมดลงในกระบวนการ Compile ของ SASS

แก้ไขไฟล์ node_modules/@ionic/app-scripts/config/sass.config.js โดยเพิ่ม BS4 และ FA5 ลงในรายการตามรูป

  includePaths: [
    'node_modules/bootstrap/scss',
    'node_modules/@fortawesome/fontawesome-free/scss',
    ...
  ],

เพิ่ม font-awesome ลงใน src/theme/variables.scss โดยเพิ่มบรรทัดต่อไปนี้ที่ท้ายไฟล์

// Bootstrap
// --------------------------------------------------
@import 'bootstrap';

// Font-Awesome
// --------------------------------------------------
$fa-font-path: "../assets/fonts" !default;
@import 'fontawesome';
@import 'brands';  // optional
@import 'regular'; // may select one between regular  
@import 'solid';   // and solid or both
//@import 'v4-shims' // if you are upgrade from v4, include this

ทำให้ build script ของ ionic รวมสคริปต์, stylesheet และ asset ของ BS4 และ FA5 เข้าในโปรเจค

เพิ่ม block ด้านล่างนี้ลงใน package.json

 "config": {
    "ionic_copy": "./app-scripts-config/copy.config.js",
    "ionic_sass": "./app-scripts-config/sass.config.js"
  },

ติดตั้ง JS Script ใน src/index.html

...
  <!-- cordova.js required for cordova apps (remove if not needed) -->
  <script src="cordova.js"></script>

  <!-- bs4 -->
  <script src="assets/js/jquery.min.js"></script>
  <script src="assets/js/bootstrap.bundle.js"></script>
...