素胚勾勒不出你
2022-08-18 15:57:17
我正在開發一個Angular 9項目,我正在創建兩個主題,每個主題都有自己的css輸出文件。我修改了該文件以處理:angular.json"styles": [ { "input": "src/styles/themes/light-theme.scss", "lazy": true, "bundleName": "light-theme" }, { "input": "src/styles/themes/dark-theme.scss", "lazy": false, "bundleName": "dark-theme" }],light-theme并且是我的輸入文件,我正在設置變量,例如:dark-theme$background色$button色$text色等等,等等。我的問題是,我無法從每個組件中使用這些變量,因為我的組件不知道這些變量是什么。我無法導入一個或另一個主題,因為我想使用我在輸入文件中聲明的值。我應該如何處理這個問題?有沒有辦法“導入”我在angular.json文件上編寫的輸入文件?謝謝!
1 回答

精慕HU
TA貢獻1845條經驗 獲得超8個贊
如果在全局樣式中定義了 sass 變量,則在動態更改主題后將無法訪問它們。這是因為動態加載的主題將僅包含css規則,而不是sass;除了在運行時,你的組件scss也已經編譯成css,所以沒有更多的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);
}
然后,當您動態加載淺色主題時,它將覆蓋現有變量。如果您隨后動態刪除 ,它將返回到使用深色主題的變量。light-theme.css
添加回答
舉報
0/150
提交
取消