less-loader: less loader paths option doesn't work

I use resolve.alias webpack configuration(see http://webpack.github.io/docs/configuration.html#resolve-alias) to solve this problem.

In webpack.config.js:

var PATH_MAP = (function(){
      // read lib path and make PATH_MAP object
}());
module.exports = {
    // other configuration
    resolve: {
        alias: PATH_MAP,
    }
}

for example, PATH_MAP is

{
    // less
    'swiper.less': '../../path/to/swiper.less',
    // js
    'swiper': '../../path/to/swiper.js'
}

then I can use

@import "~swiper.less";

to import swiper.less, and use

import Swiper from 'swiper';

to require swiper with es2015 syntax.

Thank you all.

less-loader 4.x requires webpack 2. If you’re using webpack 2, the options need to applied like this:

// webpack.config.js
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader"
            }, {
                loader: "css-loader"
            }, {
                loader: "less-loader", options: {
                    paths: [
                        path.resolve(__dirname, "node_modules")
                    ]
                }
            }]
        }]
    }
};

as described in the README.

The problem that I have is with the @import statements within the .less files themselves - I’m trying to use the semantic-ui-less package, which contains import statements of the form @import “…/…/theme.config” (the idea is that you put a theme.config in your own project which overrides the default theme). I can’t modify the import statements to include the ‘~’, and I can’t use resolve.alias because (AFAICT) the @import paths aren’t processed through the webpack resolver (which makes sense actually, as these files are part of the less build).

Is it the same problem for the rootpath parameters as well? I tried both includePath and rootpath and build still fails as webpack tried to resolveimports and urls in our less file:

{ test: /.less$/, loader: ExtractTextPlugin.extract(“style-loader”, “css-loader!less-loader?rootpath=./src/less”) },

I would like to chime in that having to pass these kinds of options as query variables creates some nasty syntax. It would be nice to be able to set things like this using loader options. For example, setting search paths for the Sass loader is easy:

'sassLoader': {
    'includePaths': [
      path.join( __dirname, 'src/ui/styles' )
    ]
  }

@Jastrzebowski Maybe you can try to use resolve.alias, and I use it to solve my problem.

Same for me. Seams like includePaths doesn’t change anything, standard CLI works great:

lessc --include-path=my/path file.less

but loader throws an error… 😕

{
    test: /\.less$/,
    loader: 'style!css!less?includePaths=my/path'
}

So to clarify, there’s currently no way to pass the includePath option to LESS?

Have tried various combinations:

{
    test: /\.less$/,
    loader: "style!css!less?includePath=" + path.resolve(__dirname, "../core/app/styles")
},

{
    test: /\.less$/,
    loader: "style!css!less?{'includePath': [path.resolve(__dirname, "../core/app/styles")]}"
},

{
    test: /\.less$/,
    loader: "style!css!less?{'paths': [path.resolve(__dirname, "../core/app/styles")}"
},

Hello !

@jhnns even with your explanation, I don’t really know what I should do to to include the path I want (in the context of storybook).

Is there any easy way to set included paths or to specify --include-paths ?

@viridia Can you use the semantic-ui-less package’s source code? I think maybe you can copy the source code into you project, then modify the source code. But it’s a ugly way. Or there is another way. Create a new project which contains your less code and dependency library, then write a shell script, use lessc to compile less, then just move the result file to your original project. : )