我决定使用语义UI,因为它是一个很棒的UI库,即使目前看起来好像已经废弃了...
我正在尝试使用semantic-ui-less
和Webpack 4进行设置。
我设法使用theme.config
使用所有的LESS配置进行编译,但是它根本不包含变量。它不反映site.variables
中的任何更改。我知道它不会热重新加载它,因为SematicUI团队提出了奇怪的解决方案,其中没有.less
扩展名,但是即使在完全刷新甚至重建后,它也不会更改任何颜色等。
它包含了theme.config
,因为如果我将按钮主题更改为amazon
我将获得亚马逊的样式按钮。
这是我的文件夹/文件结构:
我的theme.config
:
/* Global */
@site : 'default';
@reset : 'default';
/* Elements */
@button : 'default';
@container : 'default';
@divider : 'default';
@flag : 'default';
@header : 'default';
@icon : 'default';
@image : 'default';
@input : 'default';
@label : 'default';
@list : 'default';
@loader : 'default';
@placeholder : 'default';
@rail : 'default';
@reveal : 'default';
@segment : 'default';
@step : 'default';
/* Collections */
@breadcrumb : 'default';
@form : 'default';
@grid : 'default';
@menu : 'default';
@message : 'default';
@table : 'default';
/* Modules */
@accordion : 'default';
@checkbox : 'default';
@dimmer : 'default';
@dropdown : 'default';
@embed : 'default';
@modal : 'default';
@nag : 'default';
@popup : 'default';
@progress : 'default';
@rating : 'default';
@search : 'default';
@shape : 'default';
@sidebar : 'default';
@sticky : 'default';
@tab : 'default';
@transition : 'default';
/* Views */
@ad : 'default';
@card : 'default';
@comment : 'default';
@feed : 'default';
@item : 'default';
@statistic : 'default';
/*******************************
Folders
*******************************/
/* Path to theme packages */
@themesFolder : 'themes';
/* Path to site override folder */
@siteFolder : '../semantic-ui/site';
/*******************************
Import Theme
*******************************/
@import (multiple) "~semantic-ui-less/theme.less";
@fontPath : "../../../themes/@{theme}/assets/fonts";
有人可以帮忙吗?我将非常感激。