Using semantic-ui in webpack project

Question

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?

Bob Sponge · Accepted Answer · 2016-03-26 18:35:58Z

3

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.

edited Mar 26, 2016 at 18:35

answered Mar 26, 2016 at 15:52

Bob Sponge

4,7481 gold badge25 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Talin Over a year ago

Hmm, I tried this and it's not working for me, I still get:

Cannot resolve 'file' or 'directory' ../../theme.config in /home/talin/Projects/web/react-semantic-demo/node_modules/semantic-ui-less/definitions/modules

Here's what I added to the webpack config: resolve: { alias: [ { '../../theme.config': path.resolve(ROOT_PATH, 'theme.config') } ] },

Talin Over a year ago

Also, I think there's an error in your example, according to the webpack docs alias takes a map, not an array - however, I tried it both ways and no effect.

Bob Sponge Over a year ago

You're right, its must be object. Try set key to theme.config

Talin Over a year ago

I've done some more experiments and looked at the code to less-loader. As far as I can determine, @import statements from within .less files don't go through the webpack resolver. To test this, I added a NormalModuleReplacementPlugin with a callback that logs the requested path to the console, and I see my .less files in the output, but not the .config file.

Bob Sponge Over a year ago

Did you add theme.config to less loader test regexp? test: /(\.less|theme\.config)$/

mdhtr · Accepted Answer · 2017-07-04 13:47:57Z

0

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.)

answered Jul 4, 2017 at 13:47

mdhtr

751 silver badge9 bronze badges

Collectives™ on Stack Overflow

Using semantic-ui in webpack project

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related