Semantic-Org / Semantic-UI

Semantic is a UI component framework based around useful principles from natural language.
http://www.semantic-ui.com
MIT License
51.11k stars 4.94k forks source link

Theming is not working on build step #6862

Open Volland opened 5 years ago

Volland commented 5 years ago

Theming

versions

    "@craco/craco": "^5.2.3",
    "craco-less": "^1.9.0",
    "react": "^16.9.0",
    "react-scripts": "3.1.1",
    "semantic-ui-less": "^2.4.1",
    "semantic-ui-react": "0.88.0",

I follow up a theming guide . I have a next tree structure

├── craco.config.js
├── package.json
├── src
│   ├── PCGApplication.tsx
│   ├── assets
│   ├── components
│   │   └── login-form.tsx
│   ├── index.tsx
│   ├── pages
│   ├── react-app-env.d.ts
│   ├── semantic-ui
│   │   ├── site
│   │   │   ├── collections
│   │   │   │   ├── breadcrumb.overrides
│   │   │   │   ├── breadcrumb.variables
│   │   │   │   ├── form.overrides
│   │   │   │   ├── form.variables
│   │   │   │   ├── grid.overrides
│   │   │   │   ├── grid.variables
│   │   │   │   ├── menu.overrides
│   │   │   │   ├── menu.variables
│   │   │   │   ├── message.overrides
│   │   │   │   ├── message.variables
│   │   │   │   ├── table.overrides
│   │   │   │   └── table.variables
│   │   │   ├── elements
│   │   │   │   ├── button.overrides
│   │   │   │   ├── button.variables
│   │   │   │   ├── container.overrides
│   │   │   │   ├── container.variables
│   │   │   │   ├── divider.overrides
│   │   │   │   ├── divider.variables
│   │   │   │   ├── flag.overrides
│   │   │   │   ├── flag.variables
│   │   │   │   ├── header.overrides
│   │   │   │   ├── header.variables
│   │   │   │   ├── icon.overrides
│   │   │   │   ├── icon.variables
│   │   │   │   ├── image.overrides
│   │   │   │   ├── image.variables
│   │   │   │   ├── input.overrides
│   │   │   │   ├── input.variables
│   │   │   │   ├── label.overrides
│   │   │   │   ├── label.variables
│   │   │   │   ├── list.overrides
│   │   │   │   ├── list.variables
│   │   │   │   ├── loader.overrides
│   │   │   │   ├── loader.variables
│   │   │   │   ├── rail.overrides
│   │   │   │   ├── rail.variables
│   │   │   │   ├── reveal.overrides
│   │   │   │   ├── reveal.variables
│   │   │   │   ├── segment.overrides
│   │   │   │   ├── segment.variables
│   │   │   │   ├── step.overrides
│   │   │   │   └── step.variables
│   │   │   ├── globals
│   │   │   │   ├── reset.overrides
│   │   │   │   ├── reset.variables
│   │   │   │   ├── site.overrides
│   │   │   │   └── site.variables
│   │   │   ├── modules
│   │   │   │   ├── accordion.overrides
│   │   │   │   ├── accordion.variables
│   │   │   │   ├── chatroom.overrides
│   │   │   │   ├── chatroom.variables
│   │   │   │   ├── checkbox.overrides
│   │   │   │   ├── checkbox.variables
│   │   │   │   ├── dimmer.overrides
│   │   │   │   ├── dimmer.variables
│   │   │   │   ├── dropdown.overrides
│   │   │   │   ├── dropdown.variables
│   │   │   │   ├── embed.overrides
│   │   │   │   ├── embed.variables
│   │   │   │   ├── modal.overrides
│   │   │   │   ├── modal.variables
│   │   │   │   ├── nag.overrides
│   │   │   │   ├── nag.variables
│   │   │   │   ├── popup.overrides
│   │   │   │   ├── popup.variables
│   │   │   │   ├── progress.overrides
│   │   │   │   ├── progress.variables
│   │   │   │   ├── rating.overrides
│   │   │   │   ├── rating.variables
│   │   │   │   ├── search.overrides
│   │   │   │   ├── search.variables
│   │   │   │   ├── shape.overrides
│   │   │   │   ├── shape.variables
│   │   │   │   ├── sidebar.overrides
│   │   │   │   ├── sidebar.variables
│   │   │   │   ├── sticky.overrides
│   │   │   │   ├── sticky.variables
│   │   │   │   ├── tab.overrides
│   │   │   │   ├── tab.variables
│   │   │   │   ├── transition.overrides
│   │   │   │   └── transition.variables
│   │   │   └── views
│   │   │       ├── ad.overrides
│   │   │       ├── ad.variables
│   │   │       ├── card.overrides
│   │   │       ├── card.variables
│   │   │       ├── comment.overrides
│   │   │       ├── comment.variables
│   │   │       ├── feed.overrides
│   │   │       ├── feed.variables
│   │   │       ├── item.overrides
│   │   │       ├── item.variables
│   │   │       ├── statistic.overrides
│   │   │       └── statistic.variables
│   │   └── theme.config
│   └── store
└── tsconfig.json

theme file

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

Steps

dev mode works as expected

npm start 
npm run build  

Give an error

Creating an optimized production build...
Failed to compile.

./node_modules/semantic-ui-less/semantic.less
ModuleNotFoundError: Module not found: Error: Can't resolve './definitions/elements/themes/default/assets/fonts/icons.eot' in '[project path]/node_modules/semantic-ui-less'

Expected Result

Project with a custom theme should be build by cra and produce assets

Actual Result

ModuleNotFoundError: Module not found: Error: Can't resolve './definitions/elements/themes/default/assets/fonts/icons.eot' in '[project path]/node_modules/semantic-ui-less'

Volland commented 5 years ago

Semantic-Org/Semantic-UI-React#3761