Skip to content

Import paths not working as expected when rolling up. #347

@rdagostino

Description

@rdagostino

Hi,

Node Version - 1.6.0
NPM Version - 6.5.0
grunt-contrib-less Version - 1.4.1

I'm working on a multi-site project where it requires shared resources and I'm having an issue when using the paths option. When I include the paths option and import a less file in my main style sheet. It rolls up to the path I wanted separate from the root. The problem is when I import a less file relative to the main style sheet and then include that same import line into the imported file. It doesn't roll up to the shared resource.

Gruntfile configuration for paths:

options: {
    paths: './less/_shared',
}

Example of the proper roll up when not loaded relative to the main less file:

less/_shared/sample.less

body {
    background-color: white;
}

less/brands/style.less

@import 'sample.less';

Final output:

.body { background-color: white; }

That's to be expected. Now when I add the same file relative to style.less and include the import to get the shared one it doesn't import it.

Example of the improper roll up when loading a relative to the main less file:

less/_shared/sample.less

body {
    background-color: white;
}

less/brands/sample.less

@import 'sample.less';

main {
    background-color: red;
}

less/brands/style.less

@import 'sample.less';

Final output:

main{ background-color: red; }

When I would expect to see:

body { background-color: white;
main{ background-color: red; }

I do have a work around that will get the shared file when adding a preceding slash it the import. I don't want to in my production code but it works.

Example

less/brands/sample.less

@import '/sample.less';

main {
    background-color: red;
}

less/brands/style.less

@import 'sample.less';

Final output:

body { background-color: white;
main{ background-color: red; }

I've utilized this same approach with Grunt/Compass and Webpack/SASS but can't seem to achieve the same effect with Less. Any help with resolving this would be greatly appreciated.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions