less loader paths option doesn't work

[zhenzong]

In my project, there is a '/lib/css' folder. When I write less code in 'src' folder, I prefer

@import 'some.less'

to

@import '../../../lib/css/some.less'

so, In my webpack.conf.js

{
            test: /\.less$/,
            loader: 'style!css!less?{"paths": ["./lib/css"]}'
 }

according to less option usage (see http://lesscss.org/usage/#command-line-usage-options) and README.md (https://github.com/webpack/less-loader#less-options), but it seems doesn't work.

PS:   loader: 'style!css!less?paths=["./lib/css"]}' also doesn't work

Is anything wrong ? Please help me out.

[ghost]

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' )
    ]
  }

[zhenzong]

@chrismbeckett Using query variables to pass options is standard way. see webpack using loaders document. Webpack also supports configuration object. But it doesn't work no matter how I pass paths option. There is a pr ( #75) for solving this problem. but hasn't merged yet.

[oller]

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")}"
},

[wspringer]

I can't get it to work either.

[viridia]

Same here

[zhenzong]

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.

[viridia]

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

[Jastrzebowski]

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'
}

[zhenzong]

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

[zhenzong]

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

[AndyOGo]

I have encountered the same issue.
I really favour a standard solution supporting the less build in --include-path option.

This embraces portability, the tilde hack makes things really a burden.

[zhenzong]

I don't like tilde hack too,

[AndyOGo]

@zhenzong
Agree.
Actually i found this other related issue #74.
It's a exploded discussion since January, though there is already a PR... :(

[ala85]

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")
},

[slavafomin]

Hello! Is there any news on this issue?

Is it still not possible to pass --include-path option to LESS processor?

[jhnns]

Less does not map the CLI options one-by-one to API options 😢. You need to take a look at their source code.

Here they are translating --include-path to options.paths as an array:

                    options.paths = match[2]
                        .split(os.type().match(/Windows/) ? /:(?!\\)|;/ : ':')
                        .map(function(p) {
                            if (p) {
                                return path.resolve(process.cwd(), p);
                            }

You should also apply their path transformation if you're on Windows.

[GauthierPLM]

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 ?

[slavafomin]

Hello @jhnns! Thank you for your reply. I'm not sure I understood your explanation though. Could you explain, how do one specify path to look for LESS files from less-loader standpoint? Thank you.

[GauthierPLM]

@jhnns will #75 solve this issue ?

[jhnns]

Starting with less-loader 4, you can now choose between the webpack resolver and the Less resolver. If you specify the paths option, the less-loader won't use webpack's resolver, but use the given paths as module lookup. I decided to do it that way as response on #75.

Take a look at the README for further information. Does this answer your questions? @Kendos-Kenlen @slavafomin

[GauthierPLM]

@jhnns Good news ! However, I think I do something wrong :

  config.module.loaders.push({test: /\.less$/, loader: "style!css!less"});

  config.lessLoader = {
    paths: [
      path.resolve(__dirname, 'styles')
    ],
    sourceMap: true
  };

The resolved path is good but I still have a not found error.
The files I require in webpack are in /styles/ and in one of this files, I import another file in .storybook/styles/ (the line path.resolve(__dirname, 'styles') add the correct path to files). I use [email protected].

My error message is :

Module build failed: 

@import "ui-variables";
^
Cannot resolve 'file' or 'directory' ./ui-variables.less in /work/Molecule/atom-molecule-dev-environment/styles
      in /work/Molecule/atom-molecule-dev-environment/styles/diagnostic-color.less (line 1, column 0)
 @ ./styles/diagnostic-color.less 4:14-128 13:2-17:4 14:20-134

I suppose I do something wrong and I'm sorry if it's a stupid mistake... :/

[jhnns]

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.

[GauthierPLM]

Okay, that's why. Storybook require webpack ^1.13, that why. Thanks and sorry!

[jhnns]

I think, the paths option didn't work before less-loader 4. We had no tests for it.