NativeScript/nativescript-dev-sass

@import fails after upgrade to node js 7.8.0 and typescript 2.2.2

buksve opened this issue · 3 comments

buksve commented

I have been using nativescript-sass successfully in nativescript 3.0 rc under node 7.7.3 and typescript 2.2.1. After updating to typescript 2.2.2 and node js 7.8.0, I am now getting errors at the @import statements:

Error: File to import not found or unreadable: nativescript-theme-core/scss/dark.

I have investigated a bit and it seems that if I use the full path to the include, it does successfully import the file. e.g.
@import 'nativescript-theme-core/scss/dark';
does not work, while
@import './node_modules/nativescript-theme-core/scss/dark';
does work.

PS.
It seems the problem lies with nativescript-dev-sass@1.0.0-rc.2
Reverting to nativescript-dev-sass@1.0.0-rc.1 solves the problem.

toddanglin commented

This is one of the breaking changes in v1.0.0. Take a look at the README and Change Log for details.

To import files from the node_modules directory now, you must use the "~" syntax. So:

@import '~nativescript-theme-core/scss/dark`;

This change improves the compatibility of the plugin with webpack and the Angular CLI, and allows predictable relative path support for all imports. If you update to the latest release version of this plugin, just add the tilde and you should be set.

buksve commented

Yes I have tried the tilde but it does not make any difference:

This is installed:

d:\Projects\NativeScript\native3
`-- nativescript-dev-sass@1.0.0-rc.2
  `-- node-sass@4.5.2
    `-- request@2.81.0
      `-- har-validator@4.2.1
        `-- ajv@4.11.6

and this is the error I get:

Found peer node-sass
Error: File to import not found or unreadable: ~nativescript-theme-core/scss/dark.
       Parent style sheet: D:/Projects/NativeScript/native3/app/_app-common.scss
        on line 4 of app/_app-common.scss
>> @import '~nativescript-theme-core/scss/dark';
   ^

SASS compiler failed with exit code 1

This is the line of code:

@import '~nativescript-theme-core/scss/dark';

When I have a bit of time, I will try it on a clean template project and see if I get the same result.

toddanglin commented

Make sure you're using the latest released version (1.0.0...not one of the RC builds). If you're using the latest version, the tilde syntax should work. If you are on rc.2, that is probably the problem.

$ npm install nativescript-dev-sass --save-dev