reactjs 在Vite React项目中使用semantic-ui-less

lokaqttq  于 2023-04-20  发布在  React
关注(0)|答案(1)|浏览(200)

我一直在尝试将semantic-ui-less包与semantic-ui-react一起安装,但在运行npm run dev时,我得到了以下错误:

[less] '../../theme.config' wasn't found. Tried - /home/antp/Projects/semantic-test-less/node_modules/semantic-ui-less/theme.config,../theme.config,../../theme.config
5:56:10 PM [vite] Internal server error: [less] '../../theme.config' wasn't found. Tried - /home/antp/Projects/semantic-test-less/node_modules/semantic-ui-less/theme.config,../theme.config,../../theme.config
  Plugin: vite:css
  File: /home/antp/Projects/semantic-test-less/node_modules/semantic-ui-less/definitions/modules/transition.less:19:0
  16 |  @type    : 'module';
  17 |  @element : 'transition';
  18 |  
     |   ^
  19 |  @import (multiple) '../../theme.config';
  20 |  
      at less (file:///home/antp/Projects/semantic-test-less/node_modules/vite/dist/node/chunks/dep-79892de8.js:38906:33)
      at async compileCSS (file:///home/antp/Projects/semantic-test-less/node_modules/vite/dist/node/chunks/dep-79892de8.js:38277:34)
      at async TransformContext.transform (file:///home/antp/Projects/semantic-test-less/node_modules/vite/dist/node/chunks/dep-79892de8.js:37810:56)
      at async Object.transform (file:///home/antp/Projects/semantic-test-less/node_modules/vite/dist/node/chunks/dep-79892de8.js:43387:30)
      at async loadAndTransform (file:///home/antp/Projects/semantic-test-less/node_modules/vite/dist/node/chunks/dep-79892de8.js:41105:29)

EDIT:我的./src/semantic-ui/theme.config的内容,尽管只是安装了包并将semantic-ui-less/semantic.less导入我的React条目文件会导致错误。

/*******************************
        Theme Selection
*******************************/

/* To override a theme for an individual element
   specify theme name below
*/

/* 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  : '../../src/semantic-ui/site';

/*******************************
         Import Theme
*******************************/

@import (multiple) "~semantic-ui-less/theme.less";
@fontPath : '../../../themes/@{theme}/assets/fonts';
/* End Config */

我一直在找,但我似乎找不到任何关于Vite的东西。所有可能相关的问题都与create-react-app或webpack有关。

mkshixfv

mkshixfv1#

你需要在你的项目根目录中创建theme.config文件并根据你的需要配置它。确保它包含@import "../semantic-ui-less/theme.less";行,然后再次运行dev。

@import "../semantic-ui-less/theme.less";

相关问题