Semantic-ui-react: Doc - Theme - Theming with Create React App - Scaffold custom styles

[nisnardi]

Bug Report

The Theme doc for theming with Create React App has a step where you copy some theme files but running the following command will copy all the files without the theme folder structure and in a flat way.
yarn cpy node_modules/semantic-ui-less/_site/**/* src/semantic-ui/site

Steps

Follow the tutorial and execute the script

Expected Result

It will copy all the theme files with the right theme folder structure

Actual Result

After the running the script you'll see a flat file structure without the theme folders

Version

Current site version

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[layershifter]

@nisnardi thanks for feedback and catch, really appreciate 👍 Will be updated in #3652, https://github.com/Semantic-Org/Semantic-UI-React/pull/3652/files#diff-f4bd9704de5dc9d71d35da9d136fa1c0

[tresdev]

npx cpy-cli **/* ../../../src/semantic-ui/site --cwd node_modules/semantic-ui-less/_site --parents

This is not copying anything in my case. I just created a new app with latest create-react-app and followed the instruction.

So I tried copying ( node_modules/semantic-ui-less/_site => src/semantic-ui/site) and paste manually. but then:

./node_modules/semantic-ui-less/semantic.less (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-8-1!./node_modules/postcss-loader/src??postcss!./node_modules/less-loader/dist/cjs.js??ref--6-oneOf-8-3!./node_modules/semantic-ui-less/semantic.less)

@import (multiple) "theme.less";
^
Can't resolve './theme.less' in '/Users/<directories....>/semantic-test/src/semantic-ui'
      in /Users/<directories....>/semantic-test/src/semantic-ui/theme.config (line 95, column 0)

This error came up so I copied other files in node_modules/semantic-ui-less.
And this error occured:

Module not found: Can't resolve '../../src/semantic-ui/themes/themes/default/assets/fonts/brand-icons.eot' in '/Users/<directories.....>/semantic-test/node_modules/semantic-ui-less'

[layershifter]

I am not fully understand what happened:

npx create-react-app fresh-suir
yarn add @craco/craco craco-less semantic-ui-less --dev
npx cpy-cli **/* ../../../src/semantic-ui/site --cwd node_modules/semantic-ui-less/_site --parents

Then I configured @craco and did yarn start and included import 'semantic-ui-less/semantic.less' and get that error:

But, when I did all steps from guide everything started to work:

[tresdev]

I have no idea why the copying is not working for me.
I'm using the latest npm on macOS.

But I found what was the problem with other parts.
I didn't remove the last line from the original theme.config file.

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

@import (multiple) "theme.less";

Had to remove those lines. I thought I only had to remove the Folders part and replace it.
Now it's working.

[GitGitZarko]

I've also remove the last line, but is it should to me removed?
Is it work properly now?

[layershifter]

@tresdev

I created a new CLI util to copy files and scuffolding faster, please check #3752. Now, to copy files you need to run only:

$ npx @semantic-ui-react/bootstrap

@tresdev @GitGitZarko yep, the original import of theme.less should be removed, you should only these files at the bottom in theme.config:

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

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

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

[geoffreym74]

I believe I followed all of the instructions, and everything runs without errors, but the theme styles are not applied. I can't figure out what I am missing.

package.json:

...
  "dependencies": {
    ...
    "react": "^16.10.2",
    "react-dom": "^16.10.2",
    "react-scripts": "^3.2.0",
    "semantic-ui-react": "^0.88.1",
  },
  ...
  "devDependencies": {
    "@craco/craco": "^5.5.0",
    "@semantic-ui-react/craco-less": "^1.1.0",
    "semantic-ui-less": "^2.4.1"
  }

theme.config:

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

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

craco.config.js:

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

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'semantic-ui-less/semantic.less';

ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();

[kimdongseob]

@geoffreym74

Did you solve problem?? I have same problem...

How to customize without using @craco?.