Using semantic-ui-less in a Vite React project

Question

I've been trying to install the semantic-ui-less package alongside semantic-ui-react, but upon running with npm run dev I get this 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
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: Contents of my ./src/semantic-ui/theme.config, although just having the package installed and importing semantic-ui-less/semantic.less into my React entry file causes the error.

/*******************************
        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 */

I've been looking around but I can't seem to find anything regarding Vite. All possibly related issues were related to create-react-app or webpack.

Answer 1

semantic-ui-less relies on the bundler to rewrite the import of ../../theme.config to your custom theme.config. If you check the config of Semantic UI React ( https://react.semantic-ui.com/theming ) the way they do it for CRA is by using CRACO to inject a config into webpack to do this rewriting. This happens inside @semantic-ui-react/craco-less: https://github.com/layershifter/semantic-ui-tools/blob/master/packages/craco-less/src/index.js#L16

In vite you can use resolve.alias to do this: https://vitejs.dev/config/shared-options.html#resolve-alias . For this to work you will have to add @rollup/plugin-alias as a devDependency and add something like this to your 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"
      ),
    },
  },

When debugging your import paths the debug flag of vite build can be of great help: vite build -d. It will show you how imports where resolved.

Also if this is a setup for a new project I'd strongly advice against Semantic UI as the maintenance isn't that great and almost died off in the past. As you can see setting up Vite (or anything non-CRA) in the docs as this is missing completely.

EDIT: Paths will not resolve in the same way they do when using CRA/Webpack. So you'll have to use slightly different values:

Instead of @import (multiple) "~semantic-ui-less/theme.less";

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

Instead of @fontPath : '../../../themes/@{theme}/assets/fonts';

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

Answer 2

you need to create theme.config file in your project root directory and configure it to your needs Make sure it include the line @import "../semantic-ui-less/theme.less"; then try run dev again.

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