less compilation in webpack

[mukeshsoni]

I am trying to use material-ui with webpack. Doing the less compilation using less-loader using require -

require('./../node_modules/material-ui/src/less/scaffolding.less');
require('./../node_modules/material-ui/src/less/components.less');

but get this error

ERROR in ./~/css-loader!./~/less-loader!./~/material-ui/src/less/components.less
Module build failed: .lh-box-sizing is undefined
in node_modules/material-ui/src/less/core/base.less

lh-box-sizing is defined in lesshat.less mixin, which is imported in mixins.less which is imported in scaffolding.less.

Is it a problem with the less file or the way webpack less-loader is trying to load the less files?

[gpbl]

It seems the loader can't solve the path url. Try to require using ~ as suggested here

require('~material-ui/src/less/scaffolding.less');
require('~material-ui/src/less/components.less');

[mukeshsoni]

doesn't help. Also it is able to resolve the path because scaffolding.less does get compiled without any problem.

[gpbl]

You are right, the thing is that the components.less require doesn't know about the variables set in scaffolding.less. You should have only one less file importing both. Then in your code, require that one file:

// myfile.less
@import "node_modules/material-ui/src/less/scaffolding.less";
@import "node_modules/material-ui/src/less/components.less";
// Your custom styles here

require('myfile.less')

[mukeshsoni]

Tried that too. Works if i just import the scaffolding file. Fail as soon as i try importing the components.less file -

This works -

@import '~material-ui/src/less/scaffolding';

This does not -

@import '~material-ui/src/less/scaffolding';
@import '~material-ui/src/less/components';

[gpbl]

Does less understands that syntax with ~ to resolve the paths with @imports? Anyway, this is more a less-loader issue: check out this and this :-)

[mukeshsoni]

It does. The problem has been discussed here - webpack-contrib/less-loader#23.

The compilation works if i use { test: /\.less$/, loader: "style!raw!less"} in my webpack config file, but lets erroneous code to pass by. In this case, the fonts/images are not loaded. Don't know if it's a problem with the css-loader or a bug in the material-ui less files.

[gpbl]

I see :( I'm not a Less master but I'd try to see if the problem is really related to the way the paths are resolved. For example would this work?

@import '~material-ui/src/less/scaffolding';
@import '~material-ui/src/less/mixins/clearfix.less';
.test { .clearfix() }

and this?

@import '~material-ui/src/less/scaffolding';
@import '~material-ui/src/less/mixins/lesshat.less';
.test { .lh-box-sizing(border-box) }

I expect both giving the same problem.

[mukeshsoni]

Both of these would work. Once i put the files as @imports in a less file, the resolving issue is solved (even though components imports use variables defined in scaffolding). But now there seems to be a new issue wherein the css-loader complains that the css generated by less-loader has errors.

[gpbl]

So does this finally work, without using the raw loader?

@import '~material-ui/src/less/scaffolding';
@import '~material-ui/src/less/components';

The error may be related to lesshat, as I see here

[mukeshsoni]

No it does not. I have to replace css-loader with raw-loader.

Maybe related to lesshat. But no response in the lesshat thread. I will try and change the keyframes thing in the lesshat file directly and try again.

Thanks for your help!

[mukeshsoni]

@gpbl I finally took @sokra's advice and fixed the error css loader was throwing in the next pipe - webpack-contrib/less-loader#23

works, but many of the animations are now not working. Still, not bad.

[Webkadabra]

@mukeshsoni I had this issue, see webpack-contrib/less-loader#26

[tschaub]

Maybe a different issue than what you're having - but the lesshat issues are not restricted to webpack loading. See also #141.

[hai-cea]

@mukeshsoni Does the removal of lesshat fix this issue?