如何将自定义类添加到语义UI？

当和如何做我添加了一个自定义类，如：如何将自定义类添加到语义UI？

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

的原因是，这样就不会改变所有的语义UI元素了。
在哪个文件中添加它以包含在dist文件中？

来源

2017-09-24 funerr

如果您不想更改语义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将在配合的情况下给它更多的特异性。

希望这会有所帮助！ :)

来源

2017-09-24 21:20:47

我希望它也捆绑到semantic.min.css文件中，并且具有较少的功能（使用gulp watch）也可以以优雅的方式进行操作吗？ – funerr

您可以使用'watch（'css/**/*。css'，function（）{}）''来监视Gulp中多个文件的变化，并将它们传送到单个文件作为输出。不过，我不会推荐更改Semantic-UI的CSS;它本质上是一个插件。为了将它们分开，您可以将自定义CSS与Semantic-UI的内置CSS分离，并且更容易发现潜在问题。它还允许通过简单地更换HTML中CSS文件的顺序来更轻松地进行“样式修改”。 –

嗨，谢谢，这里有特殊的问题。 SUI将永远赢得您的解决方案。你有什么解决方案吗？ – funerr

如何将自定义类添加到语义UI？

回答

相关问题