Bootstrap biến 4 tùy chỉnh không ghi đè

Question

Tôi có một styles.scss chính như thế này:

//@import "../components/bootstrap/scss/bootstrap"; 

// Core variables and mixins 
@import "../components/bootstrap/scss/functions"; 
@import "../components/bootstrap/scss/mixins"; 
@import "components/variables"; 
@import "../components/bootstrap/scss/variables"; 

tôi cố gắng ghi đè lên các biến thành công trong components/variables của tôi như thế này:

$green: #71c835 !important;

Nhưng nó vẫn tiếp tục chọn màu của bootstrap variables.scss là $green: #28a745 !default;

Để tạo xem tôi allready cố gắng để chuyển đổi trình tự của hai tập tin như thế này:

// Core variables and mixins 
@import "../components/bootstrap/scss/functions"; 
@import "../components/bootstrap/scss/mixins"; 
@import "../components/bootstrap/scss/variables"; 
@import "components/variables"; 

Nó thực sự làm tôi điên làm thế nào tôi có thể chỉ đơn giản là ghi đè lên các biến bootstrap

Answer 1

$green: #71c835 !important; nghĩa Thiết lập giá trị của biến màu xanh lá cây để mã hex này theo sau là quan trọng.

Điều đó không có nghĩa là Đặt giá trị của biến xanh thành mã hex này và bỏ qua các nỗ lực tiếp theo để thay đổi giá trị đó.

---

Bạn không thể ngăn biến bị thay đổi.

Bạn phải viết mã theo đúng thứ tự.

Nếu bạn muốn ghi đè ../components/bootstrap/scss/variables từ components/variables sau đó nhập components/variablessau một trong những khác.

Answer 2

Sử dụng các trường hợp đầu tiên và loại bỏ !default

..... 
@import "components/variables"; 
@import "../components/bootstrap/scss/variables"; 

Sao chép dán biến bạn muốn ghi đè và thay đổi giá trị. và xóa thuộc tính !default. Biên dịch lại.

Thuộc tính !default hoạt động như đảo ngược! Vì vậy, phải mất giá trị của biến được khai báo trước đó. để xóa !default

!important; // luôn thắng.

!default; // nếu biến đó đã được chỉ định, hãy dùng thay thế đó. - Reference

---

Bây giờ components/variables

$green: #71c835; 

và ../components/bootstrap/scss/variables

$green: #28a745; 

Answer 3

Có lẽ bạn tạo override.scss và đặt hem SAU bạn variables.scss

@import "../components/bootstrap/scss/variables.scss"; 
@import "custome/scss/override.scss"; 

Ghi đè mã.scss:

$green: #you_code;