2017-09-24 73 views
0

如何做我添加了一個自定義類,如:如何將自定義類添加到語義UI?

.my-custom-class { 
    color: red; 
} 

的原因是,這樣就不會改變所有的語義UI元素了。
在哪個文件中添加它以包含在dist文件中?

回答

1

如果您不想更改語義UI元素,爲什麼您不需要爲定製樣式創建完全獨立的CSS文件?

這是完全沒問題(而且很常見)有多個CSS文件,如用以下結構:

<link rel="stylesheet" type="text/css" class="ui" href="/dist/semantic.min.css"> 
<link rel="stylesheet" type="text/css" href="custom.css"> 

然後在custom.css,只需提供您的其他自定義樣式:

.my-custom-class { 
    color: red; 
} 

外部樣式表直接加載的順序對應於specificity;加載您的自定義樣式表語義UI將在配合的情況下給它更多的特異性。

希望這會有所幫助! :)

+0

我希望它也捆綁到semantic.min.css文件中,並且具有較少的功能(使用gulp watch)也可以以優雅的方式進行操作嗎? – funerr

+1

您可以使用'watch('css/**/*。css',function(){})''來監視Gulp中多個文件的變化,並將它們傳送到單個文件作爲輸出。不過,我不會推薦更改Semantic-UI的CSS;它本質上是一個插件。爲了將它們分開,您可以將自定義CSS與Semantic-UI的內置CSS分離,並且更容易發現潛在問題。它還允許通過簡單地更換HTML中CSS文件的順序來更輕鬆地進行「樣式修改」。 –

+0

嗨,謝謝,這裏有特殊的問題。 SUI將永遠贏得您的解決方案。你有什麼解決方案嗎? – funerr

相關問題