Import global LESS file in Angular's component

Question

On an Angular 9 home.component.less file I tried to import a global less file:

@import (reference) './mixins.less';

The file is on the project root along with index.html. So the structure is:

src
  mixins.less
  index.html
  app
    home
      home.component.less

When I build it I get the error:

Can't resolve './mixins.less' in '/project/src/app/home'

How can I solve this?

score 1 · Accepted Answer · answered Apr 11 '20 at 15:57

1

This is most likely a path error.

Try

@import (reference) '../../mixins.less';

To search for the file in the src folder.

answered Apr 11 '20 at 15:57

kacase

Yes, that works but I would like to not use a relative path. I would prefer something like: `@import (reference) '~mixins.less';` But I get the error with this. – Miguel Moura Apr 11 '20 at 16:10
You did not specify that in your question. – kacase Apr 11 '20 at 16:38
1

https://stackoverflow.com/questions/42865697/scss-import-relative-to-root – kacase Apr 11 '20 at 16:39

1 Answers1