วิธีที่ถูกต้องในการแทนที่ _variables ใน Bootstrap 4.3.1 คืออะไร

ฉันใช้ Bootstrap 4.3.1 ในโปรเจ็กต์เชิงมุม 8 ของฉัน โดยพื้นฐานแล้วฉันต้องการ (เปลี่ยน / แทนที่) ตัวแปรเริ่มต้นบางตัวของ bootstrap เช่น $font-size-base

ฉันได้ลองใช้โค้ดด้านล่างแล้ว แต่นี่ไม่ได้ผลเลย โปรดแนะนำฉันว่าอะไรคือวิธีที่ถูกต้องในการ (ปรับแต่ง / เปลี่ยนแปลง / แทนที่) ตัวแปร bootstrap scss ในโครงการเชิงมุม

เชิงมุม.json

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/scss/style.scss"
        ],

style.scss

@import "../../node_modules/bootstrap/scss/_functions";
@import "../../node_modules/bootstrap/scss/_variables";
@import "../../node_modules/bootstrap/scss/mixins";
$font-size-base: 0.655rem;

package.json

"@ng-bootstrap/ng-bootstrap": "^5.1.2",
"bootstrap": "^4.3.1",

ยังคงแสดงขนาดตัวอักษรเริ่มต้นขณะรันโปรเจ็กต์เชิงมุม

Ahmer Ali Ahsan 15.11.2019 แหล่งที่มา

comment

หากคุณใช้ไฟล์ bootstrap css ที่สร้างไว้ คุณจะไม่สามารถปรับแต่งตัวแปร scss ได้อีกต่อไป คุณต้องใช้ scss เพื่อสร้าง bootstrap css ตามค่าตัวแปรของคุณ เอกสารอธิบายวิธีปรับแต่งตัวแปร: getbootstrap.com/docs/4.3 /getting-started/theming/ - JB Nizet 16.11.2019

คำตอบ (1)

arrow_upward
1
arrow_downward

คำตอบสำหรับคำถามของฉันถูกกล่าวถึงในความคิดเห็นของ @JB Nizet

ฉันกำลังโพสต์คำตอบนี้เพื่อแสดงขั้นตอนเล็กๆ น้อยๆ สำหรับนักพัฒนาที่กำลังจะมาถึง ซึ่งยินดีที่จะรู้คำตอบที่เป็นประโยชน์สำหรับคำถามของฉัน

หากคุณใช้ Angular 8 กับ Bootstrap ^4.3.1 โหนดสไตล์ของคุณในไฟล์ angular.json ควรเป็นดังนี้:

"styles": [
   //"node_modules/bootstrap/scss/bootstrap.scss",
   //"node_modules/bootstrap/dist/css/bootstrap.min.css",
   "src/scss/style.scss"
],

และ style.scss ของคุณจะเป็นดังนี้:

/* You can add global styles to this file, and also import other style files */
$font-size-base: 0.875rem;
@import "../../node_modules/bootstrap/scss/bootstrap";

Ahmer Ali Ahsan 16.11.2019

วิธีที่ถูกต้องในการแทนที่ _variables ใน Bootstrap 4.3.1 คืออะไร

คำตอบ (1)

คำถามในหัวข้อ