Issues when importing

[bradleygore]

I'm using this plugin and SCSS stylesheets, and have a structure like this:

app/_variables.scss
app/someView/someComponent/someComponent.scss

When I'm in someComponent.scss, importing _variables.scss isn't working as expected. Here's how I've tried:

@import "../../_variables.scss"; and then based on anothers' suggestion tried @import url("../../_variables.scss");

With the first, it throws an exception saying _File to import not found or unreadable: ../../variables.scss

With the second approach, it seems to import correctly, but I can't access any of the actual variables. When I try to use them, I get this exception saying Undefined variable: "$darkBlue".

Is there something I'm totally missing?

[toddanglin]

@bradleygore Not sure if you resolved your issue. Just merged an improvement from @NathanWalker that addresses SCSS partials. It might help in your case.
#5

[jacobedawson]

@toddanglin thanks for the plugin :)

I'm new to NativeScript and I'm also coming across this issue with version 0.3.0 If I use an import statement like: @import "../../sass/helpers/_variables.scss";

Then I receive an error 'File to import not found or unreadable'.

If I use the url syntax: @import url("../../sass/helpers/_variables.scss");

The I receive the same 'Undefined variable: '$example...' error.

I also receive an output to the console:

Parent style sheet: stdin

I looked at #5 and it suggests that a fix has been made but if it has I'm not seeing it - is there something in my code that I need to change? I'm used to prefixing my 'helpers' in sass with an underscore, but I get the same error even without the prefix.

Cheers,

Jake

[toddanglin]

@jacobedawson Do you get the same error if the folder with your import is the same directory as your SASS file? That is...

myFile.scss (with: @import 'sass/helpers/variables')
  /sass/helpers/_variables.scss

My hunch is that this is related to directory traversal, so just want to confirm the import works correctly for you if we eliminate that variable.

[jacobedawson]

Hi @toddanglin - I think you're right about directory traversal being the core issue - Importing variables from my Sass folder is fine from the root component:

app/sass/helpers/_variables.scss can be imported by app/app.scss

whereas

app/sass/helpers/_variables.scss can't be imported by app/components/example.scss

[toddanglin]

@jacobedawson Did a quick test, and I don't think you actually need to use the escape paths to reference your imports. The import will look for your files relative to the root app directory.

SO...try this...

@import 'sass/helpers/variables' from app/components/example.scss

The import should find your _variables.scss file at app/sass/helpers without the need for the relative path escaping.

[jacobedawson]

@toddanglin oh man that's perfect :) Thanks a million, works like a charm :)

[bolutife-lawrence]

This would have cost me hours of development time to debug. Thanks guys! For the thread of course. :)