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

Question

我一直在尝试将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)

编辑： my 的内容./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 有关。

Answer 1

semantic-ui-less依赖捆绑器将 的导入重写../../theme.config为您的自定义theme.config. 如果你检查 Semantic UI React ( https://react.semantic-ui.com/theming )的配置，他们为 CRA 做的方式是使用 CRACO 将配置注入到 webpack 中来进行重写。这发生在内部@semantic-ui-react/craco-less： https: //github.com/layershifter/semantic-ui-tools/blob/master/packages/craco-less/src/index.js#L16

在 vite 中，您可以使用resolve.alias以下命令来执行此操作：https ://vitejs.dev/config/shared-options.html#resolve-alias 。为此，您必须添加@rollup/plugin-alias为 devDependency 并将类似内容添加到您的 vite.config.ts 中：

  resolve: {
    // semantic-ui theming requires the import path of theme.config to be rewritten to our local theme.config file
    alias: {
      "../../theme.config": path.resolve(
        __dirname,
        "./src/semantic-ui/theme.config"
      ),
    },
  },

调试导入路径时，调试标志vite build可以提供很大帮助：vite build -d。它将向您展示如何解决导入问题。

另外，如果这是一个新项目的设置，我强烈建议不要使用语义 UI，因为维护不是那么好，并且在过去几乎消失了。正如您在文档中看到的设置 Vite（或任何非 CRA）的内容，因为这完全缺失。

编辑：路径不会像使用 CRA/Webpack 时那样解析。所以你必须使用稍微不同的值：

代替@import (multiple) "~semantic-ui-less/theme.less";

使用@import (multiple) "semantic-ui-less/theme.less";

代替@fontPath : '../../../themes/@{theme}/assets/fonts';

使用@fontPath : 'semantic-ui-less/themes/@{theme}/assets/fonts';