เว็บแพ็ค
เรียนรู้วิธีรวม Bootstrap ในโครงการของคุณโดยใช้ Webpack
การติดตั้ง Bootstrap
ติดตั้ง bootstrapเป็นโมดูล Node.js โดยใช้ npm
การนำเข้า JavaScript
นำเข้าJavaScript ของ Bootstrapโดยเพิ่มบรรทัดนี้ในจุดเริ่มต้นแอปของคุณ (ปกติindex.js
หรือapp.js
):
หรือคุณอาจนำเข้าปลั๊กอินทีละรายการได้ตามต้องการ:
Bootstrap ขึ้นอยู่กับjQueryและPopperซึ่งระบุไว้ในpeerDependencies
คุณสมบัติ ซึ่งหมายความว่าคุณจะต้องตรวจสอบให้แน่ใจว่าได้เพิ่มทั้งสองอย่างลงในการpackage.json
ใช้npm install --save jquery popper.js
ของ คุณ
การนำเข้าสไตล์
การนำเข้า Sass ที่คอมไพล์แล้ว
หากต้องการใช้งาน Bootstrap อย่างเต็มศักยภาพและปรับแต่งตามความต้องการของคุณ ให้ใช้ไฟล์ต้นฉบับเป็นส่วนหนึ่งของกระบวนการรวมกลุ่มของโปรเจ็กต์ของคุณ
ขั้นแรก สร้างของคุณเอง_custom.scss
และใช้เพื่อแทนที่ตัวแปรที่กำหนดเองที่มีอยู่แล้วภายใน จากนั้น ใช้ไฟล์ Sass หลักเพื่อนำเข้าตัวแปรที่กำหนดเอง ตามด้วย Bootstrap:
เพื่อให้ Bootstrap คอมไพล์ ตรวจสอบให้แน่ใจว่าคุณติดตั้งและใช้ตัวโหลดที่จำเป็น: sass -loader , postcss-loaderพร้อมAutoprefixer ด้วยการตั้งค่าขั้นต่ำ การกำหนดค่า webpack ของคุณควรรวมกฎนี้หรือสิ่งที่คล้ายคลึงกัน:
การนำเข้า CSS ที่คอมไพล์แล้ว
หรือคุณอาจใช้ CSS ที่พร้อมใช้งานของ Bootstrap โดยเพิ่มบรรทัดนี้ในจุดเริ่มต้นโครงการของคุณ:
ในกรณีนี้ คุณสามารถใช้กฎที่มีอยู่css
โดยไม่ต้องดัดแปลงพิเศษใดๆ กับการกำหนดค่า webpack ยกเว้นว่าคุณไม่ต้องการเพียงsass-loader
แค่style-loaderและcss-loader