Issues with theme variables, trying to integrate SUI and Laravel

[Moss Doerksen]

I'm trying to integrate Semantic UI with the Laravel PHP framework, so I am moving folders around and not using the gulpfile that comes with SUI. I was getting a error saying that "variable @themesFolder is undefined in ... theme.less", even if I explicitly said "@themesFolder : 'themes/'" right in the theme.less file! But I managed to figure out a workaround. But now I get an error saying @type is undefined. I see @type referenced in theme.less but I can't find where in the world it is supposed to be defined.

Basically, what do I need to know if I want to compile the SUI .less files without using the provided, insanely large gulpfile? On the surface SUI looked nice a friendly, but on the set up/configuration side it is looking very intimidating and there is so little documentation about it.

[Jack Lukic]

Please enjoy this thread

https://github.com/less/less.js/issues/2442

On Tue, Feb 10, 2015 at 3:32 PM, Moss Doerksen <lom...@gmail.com> wrote:

I'm trying to integrate Semantic UI with the Laravel PHP framework, so I am moving folders around and not using the gulpfile that comes with SUI. I was getting a error saying that "variable @themesFolder is undefined in ... theme.less", even if I explicitly said "@themesFolder : 'themes/'" right in the theme.less file! But I managed to figure out a workaround. But now I get an error saying @type is undefined. I see @type referenced in theme.less but I can't find where in the world it is supposed to be defined.

Basically, what do I need to know if I want to compile the SUI .less files without using the provided, insanely large gulpfile? On the surface SUI looked nice a friendly, but on the set up/configuration side it is looking very intimidating and there is so little documentation about it.

--
You received this message because you are subscribed to the Google Groups "Semantic UI" group.
To unsubscribe from this group and stop receiving emails from it, send an email to semantic-ui...@googlegroups.com.
To post to this group, send email to seman...@googlegroups.com.
Visit this group at http://groups.google.com/group/semantic-ui.
For more options, visit https://groups.google.com/d/optout.

[Jack Lukic]

The gulpfile is being reworked into separately importable tasks in a branch, and better install tools for NPM are being included. 

https://github.com/Semantic-Org/Semantic-UI/tree/meteor/tasks

I'm still trying to bulletproof things before i ship this since build tools are very difficult to modify once they are out in the wild, but it should be with the next minor release.

[Moss Doerksen]

My concern is that building the LESS requires some combination of gulp trickery and normal LESS @import and such. Is this the case or should I in theory be able to point any less compiler to theme.config and have it work, as long as I have paths set correctly?

Wait a second. I thought theme.config was the starting point but now I see that it is imported by all the files in the src/definitions folder. So it looks like I need to start with a less file that imports every less file in the definitions folder? Or there is probably some way to do it easily with a custom gulp file? (I don't know gulp or any other build tools.)

[Moss Doerksen]

OK, now I reconsolidated the folders back next to each other and I created a master less file like this:

/* Globals */

@import 'semantic-ui/definitions/globals/reset.less';

@import 'semantic-ui/definitions/globals/site.less';

/* Elements */

@import 'semantic-ui/definitions/elements/button.less';

@import 'semantic-ui/definitions/elements/divider.less';

@import 'semantic-ui/definitions/elements/flag.less';

@import 'semantic-ui/definitions/elements/header.less';

@import 'semantic-ui/definitions/elements/icon.less';

@import 'semantic-ui/definitions/elements/image.less';

@import 'semantic-ui/definitions/elements/input.less';

@import 'semantic-ui/definitions/elements/label.less';

@import 'semantic-ui/definitions/elements/list.less';

@import 'semantic-ui/definitions/elements/loader.less';

@import 'semantic-ui/definitions/elements/rail.less';

@import 'semantic-ui/definitions/elements/reveal.less';

@import 'semantic-ui/definitions/elements/segment.less';

@import 'semantic-ui/definitions/elements/step.less';

/* Collections */

@import 'semantic-ui/definitions/collections/breadcrumb.less';

@import 'semantic-ui/definitions/collections/form.less';

@import 'semantic-ui/definitions/collections/grid.less';

@import 'semantic-ui/definitions/collections/menu.less';

@import 'semantic-ui/definitions/collections/message.less';

@import 'semantic-ui/definitions/collections/table.less';

/* Modules */

@import 'semantic-ui/definitions/modules/accordion.less';

@import 'semantic-ui/definitions/modules/checkbox.less';

@import 'semantic-ui/definitions/modules/dimmer.less';

@import 'semantic-ui/definitions/modules/dropdown.less';

@import 'semantic-ui/definitions/modules/modal.less';

@import 'semantic-ui/definitions/modules/nag.less';

@import 'semantic-ui/definitions/modules/popup.less';

@import 'semantic-ui/definitions/modules/progress.less';

@import 'semantic-ui/definitions/modules/rating.less';

@import 'semantic-ui/definitions/modules/search.less';

@import 'semantic-ui/definitions/modules/shape.less';

@import 'semantic-ui/definitions/modules/sidebar.less';

@import 'semantic-ui/definitions/modules/sticky.less';

@import 'semantic-ui/definitions/modules/tab.less';

@import 'semantic-ui/definitions/modules/transition.less';

@import 'semantic-ui/definitions/modules/video.less';

/* Views */

@import 'semantic-ui/definitions/views/ad.less';

@import 'semantic-ui/definitions/views/card.less';

@import 'semantic-ui/definitions/views/comment.less';

@import 'semantic-ui/definitions/views/feed.less';

@import 'semantic-ui/definitions/views/item.less';

@import 'semantic-ui/definitions/views/statistic.less';

The globals work fine but now I am getting an error from button.less that @verticalAlign is undefined. Why?

[Moss Doerksen]

Aha! I realized there would be a problem the way the definitions/ LESS files were set to import the theme.config folder. By default LESS will just import it once and further attempts will be blocked, so I simply replaced all the lines that said 

@import '../../theme.config'

with:

@import (multiple) '../../theme.config'

And now there are no more complaints about missing variables! It seem like a bug in the less files if you ask me...

But NOW I am getting a different weird error:

Error: Operation on an invalid type in file M:\Work\GLE\GLEsite\resources\assets\semantic-ui\definitions\elements\header.less line no. 68

And line 68 of header.less simply says: 

padding-right: (@iconMargin / 2);

Ugh. Now what?

[Moss Doerksen]

OK, sorry Jack, it took me awhile to understand how github issue you mentioned had anything to do with this. So now I followed the recommendation of Matthew Dean and created a master app.less file that looks like this and it works like a charm!

/* Globals */

.reset()        { @import 'semantic-ui/definitions/globals/reset.less'; }
.site()         { @import 'semantic-ui/definitions/globals/site.less'; }


/* Elements */


.button()       { @import 'semantic-ui/definitions/elements/button.less'; }
.divider()      { @import 'semantic-ui/definitions/elements/divider.less'; }
.flag()         { @import 'semantic-ui/definitions/elements/flag.less'; }
.header()       { @import 'semantic-ui/definitions/elements/header.less'; }
.icon()         { @import 'semantic-ui/definitions/elements/icon.less'; }
.image()        { @import 'semantic-ui/definitions/elements/image.less'; }
.input()        { @import 'semantic-ui/definitions/elements/input.less'; }
.label()        { @import 'semantic-ui/definitions/elements/label.less'; }
.list()         { @import 'semantic-ui/definitions/elements/list.less'; }
.loader()       { @import 'semantic-ui/definitions/elements/loader.less'; }
.rail()         { @import 'semantic-ui/definitions/elements/rail.less'; }
.reveal()       { @import 'semantic-ui/definitions/elements/reveal.less'; }
.segment()      { @import 'semantic-ui/definitions/elements/segment.less'; }
.step()         { @import 'semantic-ui/definitions/elements/step.less'; }


/* Collections */


.breadcrumb()   { @import 'semantic-ui/definitions/collections/breadcrumb.less'; }
.form()         { @import 'semantic-ui/definitions/collections/form.less'; }
.grid()         { @import 'semantic-ui/definitions/collections/grid.less'; }
.menu()         { @import 'semantic-ui/definitions/collections/menu.less'; }
.message()      { @import 'semantic-ui/definitions/collections/message.less'; }
.table()        { @import 'semantic-ui/definitions/collections/table.less'; }


/* Modules */


.accordion()    { @import 'semantic-ui/definitions/modules/accordion.less'; }
.checkbox()     { @import 'semantic-ui/definitions/modules/checkbox.less'; }
.dimmer()       { @import 'semantic-ui/definitions/modules/dimmer.less'; }
.dropdown()     { @import 'semantic-ui/definitions/modules/dropdown.less'; }
.modal()        { @import 'semantic-ui/definitions/modules/modal.less'; }
.nag()          { @import 'semantic-ui/definitions/modules/nag.less'; }
.popup()        { @import 'semantic-ui/definitions/modules/popup.less'; }
.progress()     { @import 'semantic-ui/definitions/modules/progress.less'; }
.rating()       { @import 'semantic-ui/definitions/modules/rating.less'; }
.search()       { @import 'semantic-ui/definitions/modules/search.less'; }
.shape()        { @import 'semantic-ui/definitions/modules/shape.less'; }
.sidebar()      { @import 'semantic-ui/definitions/modules/sidebar.less'; }
.sticky()       { @import 'semantic-ui/definitions/modules/sticky.less'; }
.tab()          { @import 'semantic-ui/definitions/modules/tab.less'; }
.transition()   { @import 'semantic-ui/definitions/modules/transition.less'; }
.video()        { @import 'semantic-ui/definitions/modules/video.less'; }


/* Views */


.ad()           { @import 'semantic-ui/definitions/views/ad.less'; }
.card()         { @import 'semantic-ui/definitions/views/card.less'; }
.comment()      { @import 'semantic-ui/definitions/views/comment.less'; }
.feed()         { @import 'semantic-ui/definitions/views/feed.less'; }
.item()         { @import 'semantic-ui/definitions/views/item.less'; }
.statistic()    { @import 'semantic-ui/definitions/views/statistic.less'; }






.reset();
.site();
.button();
.divider();
.flag();
.header();
.icon();
.image();
.input();
.label();
.list();
.loader();
.rail();
.reveal();
.segment();
.step();
.breadcrumb();
.form();
.grid();
.menu();
.message();
.table();
.accordion();
.checkbox();
.dimmer();
.dropdown();
.modal();
.nag();
.popup();
.progress();
.rating();
.search();
.shape();
.sidebar();
.sticky();
.tab();
.transition();
.video();
.ad();
.card();
.comment();
.feed();
.item();
.statistic();

[Jack Lukic]

I'm considering wrapping each component in a similar way to avoid having to do it in @import statements. 

[Kristian Marinkovic]

Hi all,

i just want to add that if you want to reuse the *.variables or *.overrides files you have to import them immediately before the *.less import. Then and only then it is guaranteed that your variables are correct and not overridden by another import. it took me some time to realize my failure as i was importing all the *.variables at the top of my master less file.

e.g.
.site() {
    @import "less/theme/default/globals/site.overrides";
    @import "less/theme/default/globals/site.variables";
    @import "bower/install/semantic-ui/src/definitions/globals/site.less";
}

cheers,
Kris