Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
rdagostino opened this issue Jan 11, 2019 · 0 comments
Open

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

rdagostino opened this issue Jan 11, 2019 · 0 comments

Comments

@rdagostino
Copy link

rdagostino commented Jan 11, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant