无法在React项目中设置semantic-ui-react

Question

我正在尝试使用给定的https://react.semantic-ui.com/theming步骤来设置语义ui react。但我不知道这里出了什么问题。

/craco.config.js

module.exports = {
    plugins: [{ plugin: require('@semantic-ui-react/craco-less') }],
}

/src/semantic-ui/teme.config

....
/*******************************
            Folders
*******************************/

/* Path to theme packages */
@themesFolder : 'themes';
@siteFolder  : '../../src/semantic-ui/site';


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

/* Path to site override folder */
@siteFolder  : 'site';

....

错误：

@import (multiple) "theme.less";
^ Can't resolve in <path>

Answer 1

这是使用create-react- semantic-ui (CRA)设置的2021年semantic-ui主题和站点样式配置的更新(适用于react-scripts版本4.0.3)

在项目根目录my craco.config.js中

module.exports = {
  plugins: [
    {
      plugin: require("@semantic-ui-react/craco-less"),
      options: {
        lessLoaderOptions: {
          lessOptions: {
            math: "always",
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

这是为了始终允许较少的加载器的数学模式。react.semantic-ui.com的主题站点中提供的较新的一行配置至少不能与CRA Typescript一起使用。

在文件./src/semantic-ui/theme.config中

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

您的站点路径不正确，因为在themes.config中，siteFolder是相对于node_modules中的位置的。相反，我们将其更改为指向src/semantic-ui文件夹内，如前所示。

测试主题支持时请注意：

1. 并非所有元素都实现了所有主题，请提前从node_modules themes文件夹中检查哪些主题可以使用(以代码形式实现)。例如: Segment只允许'default‘或'github’主题。请参阅示例segment docs at 1.semantic-ui.com.

1. 查找有关覆盖如何工作的文档，例如，如文档建议的那样，在semantic-ui/site/globals/site.variables中添加@pageBackground #3450ad会更改body的背景色。这是测试“站点”配置是否按预期工作的好方法。