1 回答

TA貢獻(xiàn)1845條經(jīng)驗(yàn) 獲得超8個(gè)贊
如果在全局樣式中定義了 sass 變量,則在動(dòng)態(tài)更改主題后將無(wú)法訪問(wèn)它們。這是因?yàn)閯?dòng)態(tài)加載的主題將僅包含css規(guī)則,而不是sass;除了在運(yùn)行時(shí),你的組件scss也已經(jīng)編譯成css,所以沒(méi)有更多的sass變量的概念。
你可以做的是使用CSS變量,它們具有良好的瀏覽器支持(除了IE和opera mini)。
例如,您可以在主題文件中定義這些變量
dark-theme.scss
:root{
--button-background: darkgrey;
--button-color: white;
}
光主題.scss
:root{
--button-background: lightgrey;
--button-color: black;
}
然后在組件中,使用這些變量
component.scss
button
{
cursor: pointer;
padding: 10px;
border: 0;
color:var(--button-color);
background-color:var(--button-background);
}
然后,當(dāng)您動(dòng)態(tài)加載淺色主題時(shí),它將覆蓋現(xiàn)有變量。如果您隨后動(dòng)態(tài)刪除 ,它將返回到使用深色主題的變量。light-theme.css
添加回答
舉報(bào)