CODEWITHSUNDEEP
webpacksemantic-ui
Talin
Talin

Reputation: 1415

Using semantic-ui in webpack project

I'm trying to use the semantic-ui-less package, but whenever I try to import one of the .less files, I get an error saying that ../../theme.config can't be found. Of course, I have a theme.config, but it can't find it.

The .less file that's importing theme.config is located in node_modules/semantic-ui-less/src/definitions/modules/checkbox.less. With a relative path of ../.., I would expect it to want themes.config to be in node_modules/semantic-ui-less/src, but obviously I can't put my own theme.config inside of an installed node module directory - so where can I locate it so that less will be able to find it? Or is there some configuration I can pass to less-loader that will tell it how to find it?

Upvotes: 2

Views: 2721

Answers (2)

mdhtr
mdhtr

Reputation: 75

I use the solution provided in Artem Butusov's tutorial.

It solves the problem by running a postinstall script that fixes the wrong references in the semantic-ui-less package by overwriting the theme.config in node_modules with the one you provide.

It also fixes the wrong font paths in the themes.

(I came across this solution in an issue of semantic-ui-less when I was trying to solve this same problem.)

Upvotes: 0

Bob Sponge
Bob Sponge

Reputation: 4738

You can directly point webpack to your theme.config file with resolve.alias option:

resolve: {
  alias: {
    'theme.config': path.join(__dirname, 'src', 'theme.config')
  }
}

And of course you need a loader for .config files.

Upvotes: 3

Related Questions