未为语义UI Less和Webpack 4加载变量

时间:2019-01-18 10:06:48

标签: javascript webpack less semantic-ui semantic-ui-react

我决定使用语义UI,因为它是一个很棒的UI库,即使目前看起来好像已经废弃了...

我正在尝试使用semantic-ui-less和Webpack 4进行设置。

我设法使用theme.config使用所有的LESS配置进行编译,但是它根本不包含变量。它不反映site.variables中的任何更改。我知道它不会热重新加载它,因为SematicUI团队提出了奇怪的解决方案,其中没有.less扩展名,但是即使在完全刷新甚至重建后,它也不会更改任何颜色等。

它包含了theme.config,因为如果我将按钮主题更改为amazon我将获得亚马逊的样式按钮。

这是我的文件夹/文件结构:

enter image description here

我的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";

有人可以帮忙吗?我将非常感激。

0 个答案:

没有答案