@import problem

[dmeij]

Hi I have the following problem with @import. I have the following directory structure:

• src
• • globals
• • • Default.less
• • modules
• • • dashboard
• • • • View.js
• • • • View.less
• • • help
• • • • View.js
• • • • View.less

In every View.js I import the View.less, so far so good. The Views.less files look like this:

globals/Default.less
@color_black: #424242;

dashboard/View.less

@import "src/globals/Default.less";

.module {color: @color_black;}

help/View.less

@import "src/modules/dashboard/View.less";

.module {font-size: 14px;}

When I try to run this code it breaks: "TypeError: Path must be a string. Received { resolve: [Function: resolve]". It looks like the first time you import a less file the relative path is the root directory of my project. But when I import the next file "dashboard/View.less" the relative path in that file isn't the root directory anymore, but the directory it is imported from "src/modules/help/". I've tried using ./ or / in "dashboard/View.less" for the Default.less import.

I hope that i've described my problem clear enough en hope you can help me with it.

[kristerkari]

hey @dmeij, I think that the paths are relative, so I think that you should be using ../ to go up in the directory structure.

[dmeij]

Unfortunately that is not possible. I work with even more files, some of which also import each other. Therefore a relative path is not possible. My example wasn't showing that, here's an updated one:

• src
• • globals
• • • Default.less
• • modules
• • • dashboard
• • • • View.js
• • • • View.less
• • • • Form.less
• • • help
• • • • View.js
• • • • View.less
• • • • Form.less

help / Form.less

@import "src/modules/dashboard/Form.less";

.module {color: @color_black;}

dashboard / Form.less

@import "src/globals/Defaults.less";

.module {color: @color_red;}

Don't look at the content of the less files, it's just to make the problem clear. If I import the dashboard form in the help form file I have to use the root folder, same goed for the dashboard form file. So when I open the form on the dashboard everything works fine. But when I open the form from help that includes the form from the dashboard the include path is correct. But the import of the defaults.less isn't when you import the dashboard form from the help form.

It would be great if you could define a base root dir (the root of the project) and use that in the @import path. So that every path can be defined from the root of the project. Is this possible?