I have problem with configuration semantic-ui theming in React app created with CRA.
First I'm using clear CSS reference to Semantic UI and everything works fine. But when I decided to configure theming in my app I have a lot of problems.
I make everythink what is writen in this docs (https://react.semantic-ui.com/theming#theming-with-create-react-app) step by step.
My package.json
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "craco eject"
},
"devDependencies": {
"@craco/craco": "^5.6.4",
"@semantic-ui-react/craco-less": "^1.2.1",
"semantic-ui-less": "^2.4.1"
}
App.js
import 'semantic-ui-less/semantic.less';
craco.config.js
module.exports = {
plugins: [{ plugin: require("@semantic-ui-react/craco-less") }],
};
theme.config
/*******************************
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 */
This is my catalog structure
And all the time I have this problem when I run "npm start":
0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli 'C:\\Users\\XYX\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli 'start' ]
2 info using npm@6.14.8
3 info using node@v10.16.3
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle lendly@0.1.0~prestart: lendly@0.1.0
6 info lifecycle lendly@0.1.0~start: lendly@0.1.0
7 verbose lifecycle lendly@0.1.0~start: unsafe-perm in lifecycle true
8 verbose lifecycle lendly@0.1.0~start: PATH: C:\Users\XYX\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\XYX\Desktop\Frontend\Lendly\node_modules\.bin;C:\Program Files (x86)\Common Files\Intel\Shared Libraries\redist\intel64\compiler;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\170\Tools\Binn\;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\130\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\140\Tools\Binn\;C:\Program Files\Microsoft SQL Server\140\Tools\Binn\;C:\Program Files\Microsoft SQL Server\140\DTS\Binn\;C:\Program Files (x86)\Microsoft SQL Server\150\DTS\Binn\;C:\Program Files\Git\cmd;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\nodejs\;C:\Program Files (x86)\Windows Kits\8.1\Windows Performance Toolkit\;C:\Program Files\dotnet\;C:\Users\XYX\AppData\Local\Microsoft\WindowsApps;C:\Users\XYX\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\XYX\AppData\Local\Microsoft\WindowsApps;C:\Users\XYX\AppData\Roaming\npm;C:\Users\XYX\.dotnet\tools;C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2019.3.4\bin
9 verbose lifecycle lendly@0.1.0~start: CWD: C:\Users\XYX\Desktop\Frontend\Lendly
10 silly lifecycle lendly@0.1.0~start: Args: [ '/d /s /c', 'craco start' ]
11 silly lifecycle lendly@0.1.0~start: Returned: code: 134 signal: null
12 info lifecycle lendly@0.1.0~start: Failed to exec start script
13 verbose stack Error: lendly@0.1.0 start: `craco start`
13 verbose stack Exit status 134
13 verbose stack at EventEmitter.<anonymous> (C:\Users\XYX\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:198:13)
13 verbose stack at ChildProcess.<anonymous> (C:\Users\XYX\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:198:13)
13 verbose stack at maybeClose (internal/child_process.js:982:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid lendly@0.1.0
15 verbose cwd C:\Users\XYX\Desktop\Frontend\Lendly
16 verbose Windows_NT 10.0.18363
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\XYX\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "start"
18 verbose node v10.16.3
19 verbose npm v6.14.8
20 error code ELIFECYCLE
21 error errno 134
22 error lendly@0.1.0 start: `craco start`
22 error Exit status 134
23 error Failed at the lendly@0.1.0 start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 134, true ]