Fomantic-ui: Please provide replacement for 'semantic-ui-less'

[murbanowicz]

Could you please provide a replacement for semantic-ui-less?
It is great you picked up SUI and making improvements but not being able to use less for customization, bundling etc blocks me from using FUI ... :cry:

[hammy2899]

I have created a new repository called Fomantic-UI-LESS, you can also find it on NPM as fomantic-ui-less

[murbanowicz]

@hammy2899 thanks!

However it does not work after replacing semantic-ui-less with that.
It throws:

}

^
Unrecognised input. Possibly missing something
      in /home/marek/dev/private/system/node_modules/fomantic-ui-less/themes/default/globals/colors.less (line 397, column 0)

[hammy2899]

@lubber-de

[ColinFrick]

@murbanowicz which less version are you using?

[murbanowicz]

@ColinFrick "less-loader": "^4.1.0",

[lubber-de]

As @ColinFrick asks:
colors.less uses the maps syntax which needs less >=3.5. Anyway, FUI 2.7.x needs less >=3.7 to be able to use the each functionality which is used the for @colors map. I don't see any other part of the code which will cause the mentioned error message :thinking: (for example, if a variable is missing, it should be told by less explicisely)
"Unrecognised input" almost always mean, less does not understand the syntax, which probably leads to an old used version

[lubber-de]

@murbanowicz How are you compiling the files? i'll try to do the same tonight then

[murbanowicz]

Ok, my mistake, however, it is still not working.

I've forgotten to change the import in main.tsx, but now I did it, so in main.tsx I have: import 'fomantic-ui-less/semantic.less';

  @isDark                     : @colors[@@color][isDark];
  @_labelColor                : @colors[@@color][color];
                                     ^
Unrecognised input
      in /home/marek/dev/private/system/node_modules/fomantic-ui-less/definitions/elements/label.less (line 622, column 39)

[hammy2899]

@murbanowicz Run the following command and past the output here please.

$ npm ls less

[murbanowicz]

└── (empty)

[hammy2899]

@murbanowicz Did you run that in your project directory?

[hammy2899]

Ok I think I know whats going on.

FUI needs less 3.7 and less-loader doesn't install less as its a pear dependency. I think a solution to this is to install less as a dependency of the project via

$ npm install [email protected]

Once installed try building again.

[murbanowicz]

Thanks! Installed [email protected] and it is working as expected!!

Do you think it would be worthwile to write simple article how to set up FUI with Less and webpack 4 with enabled customization etc and link it in FUI docs? I could do that.

[hammy2899]

@murbanowicz Yeah that would be awesome and we would appreciate it if you did 🙂

[lubber-de]

As the main task (providing a separate less-repo) is done and you confirmed to be able to compile using [email protected], i am closing this issue.
When you have published your article about FUI and it's setup (really looking forward to it :grinning: ), please let us know!