我有一些風格：
令牌.scss
.text-center {
text-align:center;
}
.bold {
font-weight: bold;
}
@mixin text-style-1 {
font-size: 1.2rem;
font-weight: bold;
}
組件/card.scss
@use "../token.scss" as tokens;
.card {
@include tokens.text-style-1;
border: 1px solid #333333;
}
索引.scss
// import components
@use component/card.scss
// import tokens
@use tokens.scss
當我編譯index.scss時，我希望tokens.scss中的樣式包含在我的組件樣式之后，但是因為我在組件中 @use 來自tokens.scss的 mixins它總是在之前匯入，而不是按照 index.scss 中定義的順序匯入。 .scss _
無論如何，是否只包含來自tokens.scss的 mixins而無需在我的組件之前匯入所有樣式？還是在使用@use 時定義匯入順序？
我發現解決此問題的唯一方法是在index.scss 中將 @use替換為 @import ，但這顯然重復了不理想的樣式。
uj5u.com熱心網友回復：
你應該做的是將mixin放在一個單獨的檔案中。不幸的是，@import他們@use會帶來造型。
來自SASS 檔案
// src/_corners.scss
$radius: 3px;
@mixin rounded {
border-radius: $radius;
}
接著
// style.scss
@use "src/corners" as c;
.button {
@include c.rounded;
padding: 5px c.$radius;
}
編輯：添加了輸出
.button {
border-radius: 3px;
padding: 8px;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/530758.html
標籤：css粗鲁的
上一篇：如何用連字符替換HTML標簽ID和類中的所有下劃線？
下一篇：<h1>'從墻后升起'入口影片