Including semantic-ui's less files into existing build system

Question

We have a project that uses less as a css preprocessor and the less files are compiled using express-less. We are using no ui library so we wanted to try semantic. The one problem we are having is that we want to include it in our build system (where we are using express to build css). There is a pretty well-written article on how to use and build semantic, but no information on how to plug it into existing project.

Our goal is to be able to specify which components to include via the theme.config file and then import all required *.less files into the main file (much like you would do when using bootstrap for example).

We have tried simply creating theme.config file and importing it into our app, but the compiler complains about @type variable being undefined. I can't really figure out what should be in this var, but it seems that we are lacking some other configuration file.

We have also tried asking on Semantic's IRC, but no one answered.

Is there any solution for using semantic-ui but without using gulp or prebuilt css?

Answer 1

The behaviors, collections, elements, globals, modules and views in your src/definitions define your missing @type.

You should import each behavior, collection, element, global, module or view into your project file independently of each other.

For instance:

@import "./definitions/modules/rating";

Notice that the rating.less file imports your @import '../../theme.config'; file and so loads your theme settings (via ../../theme.less);

When you have only download the the semantic-ui source code and did not run gulp install. The '../../theme.config' do not exists yet. You can create a '../../theme.config' file yourself by using theme.config.example as an example.