ReactでSemantic Uiを 使ってみる

■semantic ui react

yarn add semantic-ui-react

※フォントを変えたいのでsemantic-cssは読み込まない

LESSを読むためにcracoをインストール

yarn add @craco/craco @semantic-ui-react/craco-less semantic-ui-less --dev

Package JSONを書き換え

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  }
}

craco.config.jsを作成

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

必要なbuildツールをインストール

npx @semantic-ui-react/bootstrap

インストールされた新しいフォルダ内にあるtheme.configの設定を変更
src/semantic-ui/theme.config

/*******************************
            Folders
*******************************/

@themesFolder : 'themes';
@siteFolder  : '../../src/semantic-ui/site';


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

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

Index.jsでimport

import 'semantic-ui-less/semantic.less'

font の変更

src/semantic-ui/site/globals/site.variables
@headerFont        : 'Muli', 'Noto Sans JP', sans-serif;
@pageFont          : 'Muli', 'Noto Sans JP', sans-serif;
@googleFontFamily  : 'Noto+Sans+JP:wght@300;400;700|Muli:wght@300;400;700';