快速而骯髒的引導程序在運行時覆蓋

Bootstrap 5.2及以上版本已提供本文所述方法的解決方案。因此，如果您使用的是Bootstrap 5.2或更高版本，可以直接使用CSS變量進行自定義覆蓋。

Bootstrap，這個老牌的Web前端框架，有人愛之如命，也有人對其嗤之以鼻。無論您持何種觀點，它都是一個強大的UI框架，應用廣泛，大多數人都了解其基礎知識，並且能提供高度可預測的結果。

Bootstrap 有其固有的設計理念。它要求您以特定的方式構建HTML，以特定的方式覆蓋樣式，以特定的方式構建核心文件，並以特定的方式將其包含在網站中。通常情況下，除非您的同事編寫了糟糕的Bootstrap代碼，否則這都沒問題，但它並不涵蓋所有用例。

Bootstrap 傾向於在服務器端生成，並且不喜歡在運行時覆蓋其樣式。如果您需要在應用程序中實現某種視覺主題功能，Bootstrap建議您為每個主題生成單獨的樣式表，並在需要時切換樣式表。如果您要為用戶提供預定義的主題，這是一種很好的方法。但是，如果您想要用戶自定義主題呢？您可以設置您的應用程序來運行Sass並編譯新的樣式表並將其保存到服務器，但這需要大量的工作——此外，您還必須與後端人員和DevOps團隊溝通，如果您只想，比如說，交換主色和次色，這將是一大堆麻煩。

這就是我當時面臨的情況。

我正在使用Django和Vue構建一個多用戶SaaS應用程序，它具有固定的佈局，但也需要能夠為每個用戶帳戶更改品牌顏色，並具有自動的默認顏色主題。還有一個要求是，我們不會在每次添加新用戶時都重新部署應用程序。最後，每個後端和DevOps開發人員目前都忙於其他項目，所以我必須獨自解決這個問題。

由於我不想在運行時編譯Sass，我可以創建樣式表並將它們注入頁面，但這並不是一個好的解決方案，因為我們關注的是顏色。編譯後的Bootstrap樣式表將顏色值呈現為明確的十六進制值，而且（我剛剛檢查過）我的樣式表中主藍色的實例有23個。僅僅為了主色，我就需要覆蓋每個實例，然後再次為次色、警告色、危險色以及我們想要更改的所有其他約定和顏色標準化進行操作。這很複雜，而且工作量很大。我不想那樣做。

幸運的是，這個新應用程序不需要支持Internet Explorer 11，這意味著我可以使用CSS變量。它們也很棒，可以在加載樣式表後定義，向各個方向流動並更改所有我想要的顏色，對吧？ Bootstrap在:root元素中生成該大型變量列表，因此這應該很簡單。

這時我了解到，Bootstrap只將其某些值呈現為樣式表中的變量，並且此變量列表完全用於最終用戶使用。該列表中的大多數變量在樣式表的其餘部分中都沒有被引用，因此重新定義它們沒有任何作用。 （但是，值得注意的是，未來可能會提供更好的運行時變量支持。）

因此，我希望我的Bootstrap樣式表能夠使用CSS變量呈現，這些變量可以在服務器端而不是靜態顏色值進行操作，嚴格來說，這是不可能的。如果您將顏色變量設置為CSS變量，Sass將無法編譯。有一些巧妙的技巧可以使Sass做到這一點（這裡有一個，還有一個），但它們需要分支Bootstrap，而脫離升級路徑會給我的應用程序帶來一些我不願意添加的脆弱性。如果我完全說實話，我沒有實現這些解決方案的真正原因是我無法弄清楚如何讓任何一個與我的Sass編譯器一起工作。但您可能運氣更好。

我認為在這裡解釋我首選的工作流程是值得的。我更喜歡在我的開發機器上本地運行Sass來構建樣式表並將編譯後的樣式表提交到倉庫。最佳實踐建議應該在部署期間編譯樣式表，這是正確的，但我為一家不斷發展、人手perpetually understaffed 的創業公司工作。我使用Sass是因為我喜歡它，但在我的工作中顯然是一個主題，我沒有時間、能力或精神力量將我的Sass構建與我們的各種部署管道集成。

這也是一種合法的邪惡自衛：我不希望我們的全棧開發人員接觸到我精心製作的樣式並開始編寫他們想要的任何內容；而且我發現，由於某種原因，他們在筆記本電腦上安裝Node時遇到了很大的麻煩。唉！他們只能求我幫忙，而這正是我想要的方式。

所有這些都是說：如果我無法讓樣式表以其中的變量呈現，那麼沒有什麼可以阻止我在樣式表編譯後將其註入到樣式表中。

見證查找和替換的力量！

我們要做的就是進入Bootstrap並找到我們想要替換的顏色，這些顏色方便地位於編譯後的樣式表頂部的:root樣式中：

 <code>:root { --bs-blue: #002E6D; --bs-indigo: #6610F2; // ... other variables }</code>

獲取例如--bs-primary 的值，也就是老式的Bootstrap藍色。我使用Gulp來編譯我的樣式表，因此讓我們在gulpfile.js中查看Sass任務函數：

 var gulp = require('gulp');
var sass = require('gulp-sass')(require('sass'));
var sourcemaps = require('gulp-sourcemaps');
var gulpreplace = require('gulp-replace');

function sassCompile() {
  return gulp.src('static/sass/project.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(sourcemaps.write('.'))
    .pipe(gulpreplace(/#002E6D/ig, 'var(--ct-primary)'))
    .pipe(gulp.dest('static/css/'));
}
exports.sass = sassCompile;

編譯樣式表，然後查看它。

 :root {
  --bs-blue: var(--ct-primary);
  --bs-indigo: #6610F2;
  // ... other variables
}

太棒了，好的，我們現在有一個完整的樣式表，它需要一個變量值來表示藍色。請注意，它同時更改了主色和“藍色”。這並非一種微妙的技術。我稱之為快速而粗糙是有原因的，但是如果您需要，獲得更細粒度的顏色替換控制相當容易。例如，如果您想將“藍色”和“主要”作為單獨的值保留，請進入您的Sass並將$blue和$primary Sass變量重新定義為不同的值，然後您可以根據需要分別查找和替換它們。

接下來，我們需要在應用程序中定義新的默認變量值。在HTML頭部執行此操作非常簡單：

<link href="/static/css/project.css" rel="stylesheet">
<style>
  :root {
    --ct-primary: #002E6D;
  }
</style>

運行它，一切都會顯示出來。所有需要是藍色的東西都是藍色的。重複此過程幾次，您突然可以控制Bootstrap樣式表中的許多顏色。這些是我選擇提供給用戶的變量，以及它們的默認顏色值：

 --ct-primary: #002E6D;
--ct-primary-hover: #00275d;
// ... other variables

現在，樂趣開始了！從這裡開始，您可以根據需要直接操作這些默認值，或者在默認值下方添加第二個:root樣式來僅覆蓋您想要的顏色。或者像我一樣，在用戶配置文件中放置一個文本字段，該字段將:root樣式輸出到您的標題中，從而覆蓋您需要的任何內容。瞧，您現在可以在運行時覆蓋Bootstrap，而無需重新編譯樣式表或讓自己抓狂。

這當然不是一個優雅的解決方案，但它解決了一個多年來開發人員一直在嘗試解決的非常具體的用例。並且在Bootstrap決定允許我們輕鬆地在運行時覆蓋變量之前，這對我來說已被證明是一個非常有效的解決方案。

以上是快速而骯髒的引導程序在運行時覆蓋的詳細內容。更多資訊請關注PHP中文網其他相關文章！