How to bypass file location length limitation with @import?

Question

Currently, I am struggling with a problem trying to import my scss variables. There appears to be a limit to how far up you can go on the file tree when using the @import statement.

This works in another file just above:

@import '../../../styles/data/variables.scss';

However this does not work in a file just below the above:

@import '../../../../styles/data/variables.scss';

It says in the console that the File to import is not found for unreadable. It would be nice if I could keep the variables file in the same place. Does anyone have any suggestions? I know it's probably a simple fix.

might be worth trying to add variables.scss before styles.scss in angular.json styles array - not sure it would work but worth a go — danday74, Oct 09 '18 at 10:03

score 1 · Answer 1 · answered Oct 09 '18 at 10:06

1

https://netbasal.com/angular-cli-and-global-sass-variables-a1b92d8ca9b7

The above article suggests you can do this:

@import “~variables.scss”;

Whist identifies this as a non relative import. It would basically point to the src folder.

answered Oct 09 '18 at 10:06

danday74

52,471
49
232
283

This I feel like would work if my variables file sat in the src folder only. However it is worth considering, I might have to end up doing this if nothing else works. – Daniel Bailey Oct 09 '18 at 10:17
you could prob do ~/something/variables.scss – danday74 Oct 09 '18 at 10:19
Yeah I tried `@import '~/styles/data/variables.scss';` which would be from the src folder and it did not work – Daniel Bailey Oct 09 '18 at 10:21
1

Here https://stackoverflow.com/questions/42865697/scss-import-relative-to-root and even better here https://scotch.io/tutorials/angular-shortcut-to-importing-styles-files-in-components#toc-shortcut-with-angular-cli-configuration suggest using stylePreprocessorOptions might work better - however this MIGHT be for older Angular versions not sure - all the best with this :) – danday74 Oct 09 '18 at 10:26
thanks! Does not seem to be working but will continue to test. – Daniel Bailey Oct 09 '18 at 10:43

score 0 · Accepted Answer · answered Oct 10 '18 at 05:59

This morning when I opened up my Visual Studio it started working again.

I did not change anything other than remove the node_modules folder and use npm install to re-install them all.

I then closed Visual Studio and restarted my machine , only re-opening it this morning.

Hopefully this will resolve someone else's problem like this if they have it.

How to bypass file location length limitation with @import?

2 Answers2