您好,登錄后才能下訂單哦!
這篇文章主要介紹“Blazor中的CSS隔離問(wèn)題分析”,在日常操作中,相信很多人在Blazor中的CSS隔離問(wèn)題分析問(wèn)題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”Blazor中的CSS隔離問(wèn)題分析”的疑惑有所幫助!接下來(lái),請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧!
1.環(huán)境
VS 2019 16.9.0 Preview 1.0
.NET SDK 5.0.100
2.前言
CSS一旦生效,就會(huì)應(yīng)用于全局,所以很容易出現(xiàn)沖突。為了解決這個(gè)問(wèn)題CSS隔離就順勢(shì)而生。Blazor誕生于2018年,至今為止已經(jīng)2年多了,然而CSS隔離直至.NET 5出現(xiàn)才支持。
3.Razor組件間隔離
Razor組件間CSS隔離應(yīng)當(dāng)是使用最為簡(jiǎn)單,也是使用最為方便的一種CSS隔離方式。實(shí)現(xiàn)Razor組件間CSS隔離非常簡(jiǎn)單,只需要在組件所在的目錄下建立同名的“.razor.css”文件即可——若文件夾A下存在名為“Component.razor”的組件,則只需要在文件夾A下建立“Component.razor.css”,即可實(shí)現(xiàn)為“Component.razor”組件設(shè)置單獨(dú)的樣式而不影響其他組件。
以默認(rèn)模板為例,新建“Index.razor.css”,其內(nèi)容如下:
h2 { font-size: 48px; font-weight: bold; }
新建“Counter.razor.css”,其內(nèi)容如下:
h2 { font-size: 16px; font-weight: 400; }
其效果如下:
上面的組件CSS文件將會(huì)被生成為“項(xiàng)目名.styles.css”的文件,在.NET 5中會(huì)被默認(rèn)添加到“index.html”中,如上兩個(gè)CSS文件會(huì)被編譯為如下結(jié)果:
/* /Pages/Counter.razor.rz.scp.css */ h2[b-g5zg69lne1] { font-size: 16px; font-weight: 400; } /* /Pages/Index.razor.rz.scp.css */ h2[b-f3rb2cn7la] { font-size: 48px; font-weight: bold; }
在瀏覽器中查看DOM元素,其結(jié)果如下:
<h2 b-f3rb2cn7la>Hello, world!</h2> <h2 b-g5zg69lne1>Counter</h2>
也就是說(shuō),這兩個(gè)組件內(nèi)的DOM被添加上了一個(gè)以“b-”開(kāi)頭加10個(gè)隨機(jī)字符的屬性,這似乎與Angular相似(本人沒(méi)有用過(guò),只是在瀏覽器中見(jiàn)到過(guò)類似的東西)。Blazor中的CSS隔離,似乎是通過(guò)隨機(jī)屬性名來(lái)實(shí)現(xiàn)的。那么,通過(guò)id和class生成styles.css是什么樣的呢?其同樣是通過(guò)隨機(jī)屬性名來(lái)實(shí)現(xiàn)的。例如,下面一段組件CSS文件,
#zxyao-a { font-size: 48px; font-weight: bold; } #zxyao-b { font-size: 24px; font-weight: bold; background-color: #ff0000; padding: 16px; } .zxyao-cls { font-size: 24px; font-weight: bold; background-color: #000; color: #fff; padding: 16px; }
其會(huì)被編譯成如下結(jié)果:
/* /Pages/Index.razor.rz.scp.css */ #zxyao-a[b-f3rb2cn7la] { font-size: 48px; font-weight: bold; } #zxyao-b[b-f3rb2cn7la] { font-size: 24px; font-weight: bold; background-color: #ff0000; padding: 16px; } .zxyao-cls[b-f3rb2cn7la] { font-size: 24px; font-weight: bold; background-color: #000; color: #fff; padding: 16px; }
其結(jié)果如下:
也就是說(shuō),無(wú)論組件CSS文件匯總?cè)绾螌?,其都?huì)轉(zhuǎn)化為CSS選擇器[隨機(jī)屬性]的形式。
4.CSS隔離的子組件支持
默認(rèn)情況下,組件CSS僅僅只會(huì)應(yīng)用都當(dāng)前組件。例如,有以下兩個(gè)組件:
/* Index.razor */ <div class="my-text"> Welcome to your new app. <CssIsolation.Components.Child /> </div> /* Components/Child.razor */ <h2>Child</h2> <div class="my-text"> 這是子組件 </div>
如果在”Index.razor.css“中樣式如下,
.my-text { border:2px solid #000; padding: 16px; }
那么其僅僅只對(duì)”Index.razor“起作用——border出現(xiàn)在最外層 Index 組件上。
如果想讓其對(duì)本組件及其子組件”.my-text“元素起作用,可以使用”::deep“進(jìn)行標(biāo)記:
::deep .my-text { border:2px solid #000; padding: 16px; }
是不是發(fā)現(xiàn),本組件的“.my-text”的border沒(méi)了。如前面所講,在這里,::deep將會(huì)被隨機(jī)屬性所替代,也就是說(shuō),其編譯結(jié)果如下:
/* /Pages/Index.razor.rz.scp.css */ [b-f3rb2cn7la] .my-text { border:2px solid #000; padding: 16px; }
其中,b-f3rb2cn7la是指本組件根元素,如圖所示。
如果本組間沒(méi)有唯一的父元素標(biāo)簽,則本組間中的每一個(gè)原生的HTML標(biāo)簽都會(huì)有相同的隨機(jī)屬性,例如下面這個(gè)組件,其“div”與“h2”都會(huì)具有相同的隨機(jī)屬性,并會(huì)用改屬性替代“::deep”標(biāo)識(shí)?!癈hild“組件中的元素將不會(huì)出現(xiàn)改隨機(jī)屬性。
<div class="my-text"> Welcome to your new app. </div> <h2> Welcome to your new app. </h2> <CssIsolation.Components.Child />
一些組件庫(kù)會(huì)提供”Template“之類的組件,例如Ant Design Blazor,如果使用組件包裹所有的元素,如:
<AntDesign.Template> <div class="my-text"> Welcome to your new app. <CssIsolation.Components.Child /> </div> </AntDesign.Template>
則Blazor會(huì)忽略外層的組件,直至在本組間內(nèi)找到第一個(gè)原生的html元素為止,然后為該層所有原生的html元素添加上隨機(jī)屬性。
因此,當(dāng)本組件的根元素與子組件需要設(shè)置樣式的元素CSS選擇器相同時(shí),如果想要隔離樣式在本組件與子組件都生效,有兩種方式:一是為本組間和子組件同時(shí)寫CSS樣式,二是再用一個(gè)元素包裹所有的組件和元素,即換個(gè)根元素。
5.CSS預(yù)處理器的支持
很多時(shí)候,我們可能會(huì)使用SCSS或LESS來(lái)編寫樣式文件,Blazor原生并不支持這些預(yù)處理器,我們可以使用任務(wù)運(yùn)行程序資源管理器來(lái)在項(xiàng)目生成前編譯SCSS或LESS,或者是使用一些第三方的庫(kù)來(lái)支持,比如微軟官方所提到的Delegate.SassBuilder。我試用了下Delegate.SassBuilder,可能由于我的使用方式不對(duì),CSS文件的生成貌似是晚于項(xiàng)目生成的,無(wú)法在第一次生成程序時(shí)對(duì)CSS文件進(jìn)行編譯,接下來(lái)我將分享另外一種方式,即使用”任務(wù)運(yùn)行程序資源管理器“。
這里我簡(jiǎn)單使用了下”node-sass“,直接通過(guò)命令行編譯,并未使用Gulp或Webpack之類的高級(jí)工具,解決方案步驟如下(node-sass的安裝這里就不再講了):
下載并按照擴(kuò)展”Command Task Runner“
編寫SCSS文件編譯命令行程序”scss.bat“
在項(xiàng)目的根目錄下新建scss.bat文件:
并寫入如下命令。
node-sass -r ./ -o ./ --source-map true --source-map-contents sass --output-style compressed
該命令將會(huì)編譯SCSS文件,并生成壓縮后的CSS文件和相應(yīng)的source map文件。
添加bat文件到Task Runner
在scss.bat文件上右鍵,選擇”Add to Task Runner“選項(xiàng)。
綁定運(yùn)行任務(wù)
打開(kāi)視圖|其他窗口|任務(wù)運(yùn)行程序資源管理器,在找到scss命令,然后右鍵,選擇綁定|生成前,綁定后可在右側(cè)綁定窗口下生成前下看到該命令。
啟用任務(wù)運(yùn)行程序后,會(huì)在解決方案目錄下生成”commands.json“文件,我的此文件內(nèi)容如下,”-vs-binding“選項(xiàng)表明了任務(wù)綁定的運(yùn)行時(shí)間的位置。
{ "commands": { "scss": { "fileName": "cmd.exe", "workingDirectory": ".", "arguments": "/c scss.bat" } }, "-vs-binding": { "BeforeBuild": [ "scss" ] } }
接下來(lái),只需要直接運(yùn)行程序,即可以看下效果。
當(dāng)然在SCSS中,我們也可以使用”::deep“標(biāo)記,其也能正確的顯示,例如:
/* Pages/Index.razor.scss */ .my-text { border: 2px solid #000; padding: 16px; ::deep { .my-text { border: 2px solid #ff0000; background-color: #000; color: #fff; } } } /* Components/Child.razor.scss */ h2 { background-color: #efefef; font-weight: 700; }
對(duì)應(yīng)的Razor組件如下:
/* Pages/Index.razor */ @page "/" <div class="my-text"> Welcome to your new app. <CssIsolation.Components.Child /> </div> /* Components/Child.razor */ <h2>Child</h2> <div class="my-text"> 這是子組件 </div>
其運(yùn)行效果如下:
但是,個(gè)人感覺(jué),在SCSS中使用”::deep“標(biāo)記可能會(huì)有點(diǎn)混亂,建議要么不使用”::deep“標(biāo)記,要么將”::deep“標(biāo)記放在最外層,即如下的形式。
// 一些SCSS樣式代碼 ... ::deep { // 子組件的一些SCSS樣式代碼 ... } // 一些SCSS樣式代碼 ...
6.修改隨機(jī)屬性標(biāo)識(shí)
前面有提到,Blazor默認(rèn)生成隨機(jī)屬性名的形式是以“b-”開(kāi)頭加10個(gè)隨機(jī)字符,在微軟的官方文檔中顯示這個(gè)是可以更改的。這對(duì)于自家的應(yīng)用來(lái)說(shuō),是比較友好的,比如小米可以定義隨機(jī)屬性形式是以”mi“開(kāi)頭,淘寶可以定義隨機(jī)屬性形式是以”tb“開(kāi)頭等等。但是,此功能似乎還存在有問(wèn)題,有人已經(jīng)在Github提出了issue——Custom CSS Scope Identifier not working,希望Blazor能夠越來(lái)與完善。
到此,關(guān)于“Blazor中的CSS隔離問(wèn)題分析”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。