如何創建_custom.scss覆蓋變量在引導4阿爾法6

Question

我想定製引導4阿爾法6的主題。我想複製從_variable.scss文件設置_custom.scss覆蓋。但是我沒有在源代碼中找到_custom.scss文件。如何在我的項目中添加_custom.scss文件？

Answer 1

我注意您的問題here，here和here：

☐考慮實施更容易一_custom.scss，內置變量替換？

所以因爲你的引導4沒有用_custom.scss文件發貨，您只需要重新創建bootstrap/scss/_custom.scss。

然後編輯bootstrap/scss/bootstrap.scss什麼它應該是：

// Core variables and mixins 
@import "variables"; 
@import "mixins"; 
@import "custom"; 

然後按照Customising variables

引導4按說]附帶一個_custom.scss文件中/scss/_variables.scss默認變量容易壓倒一切。將相關行復制並粘貼到_custom.scss文件中，修改這些值並重新編譯Sass以更改我們的默認值。 務必從覆蓋值中刪除!default標誌。

Answer 2

您確定您使用的是Bootstrap 4 alpha 6的源代碼版本嗎？或者沒有刪除_custom.scss意外？

如果你看看git repo for Boostrap 4 alpha 6，包括_custom.scss。

Answer 3

我對自己目前的解決方案不是特別高興，但它只是工作的一種方式在我目前的角度實現引導4.

1. 來「覆蓋」變量創建一個_custom.scss您的文件項目
2. 項目
   • 複製bootstrap.scss從引導內容到新的文件（例如，node_modules \引導\ SCSS \ bootstrap.scss）
   • 更新每創建一個新的bootstrap.scss M端口相對於新bootstrap.scss文件
   • 正確的文件位置添加一個導入的變量和混入更新之間
3. 新的自定義文件，無論你導入引導引用新創建的文件bootstrap.scss

樣品實施：
文件夾結構：

app 
└── styles 
    ├── bootstrap.scss 
    └── _custom.scss 

個

_custom.scss：

// For example, change links to be yellow 
$link-color: yellow; 

bootstrap.scss包含：

@import "~bootstrap/scss/variables"; 
@import "custom"; 
@import "~bootstrap/scss/mixins"; 
//etc. 

app.component.scss（我的位置任何額外的風格外引導的）：

@import "./styles/bootstrap"; // instead of @import "~bootstrap/scss/bootstrap";