SASS CSS pre-processing failed. Error: Error: File to import not found or unreadable


#1

I have installed SASS support for NativeScript and followed this tutorial. Application won’t build at all ending with an error:

app/views/welcome/welcome.android.scss SASS CSS pre-processing failed. Error: Error: File to import not found or unreadable: welcome-common.
Parent style sheet: stdin

My files:

_welcome-common.scss

@import 'nativescript-theme-core/scss/light';

$svg-background-color: white;

@import 'nativescript-theme-core/scss/index';

welcome.android.scss

@import 'welcome-common';
@import 'nativescript-theme-core/scss/platforms/index.android';

.screen-welcome {
  background-position: center bottom;
  background-size: 100% auto;
  color: white;
  font-size: 14px;
}

.logo {
  margin: 60 0 0 0;
  background-color: $svg-background-color;
  height: 30;
}

welcome.ios.scss (is empty)

Style configuration within TypeScript file:

styleUrls: ["views/welcome/welcome.css"]

Thanks for help in advance


#2

But with naming files I think it’s normal that you get error for _welcome-common.scss at @import 'welcome-common'; shouldn’t it be @import '_welcome-common'; or rename _welcome-common.scss to welcome-common.scss ?


#3

I thought the same so I tried to change it to welcome-common.scss, but to the error was the same.


#4

I’ve figured out that if you follow the tutorial and update only css files in your root app folder, it works.

EDIT:

Works only in root folder. After trying the same approach I got the same error described above.

Is there any tutorial how to use SASS within components/pages? I’ve found only those at NS snacks and egghead.io. Those only cover root app styles.

Or am I missing something and using SASS in NS the way it should have never been?


#5

So finally I figured how it works. Tutorial with _app-common.scss etc. works only in root of app folder. If you want to use common SCSS file within custom page or component you have to specified full path from app folder with file extension.

E.g. in grocery app I want to have variables in one place:

  1. Create _variables.scss with specific colors
  2. In pages/login/ create _login-common.scss
  3. Include variables in login common styles @import "variables"; - it’s in root folder
  4. Include login common styles in platform specific styles: @import "pages/login/_login-common.scss"; - path from root, underscore and file extension have to be specified.

Or just create login-common.scss and use it together with platform specific styles styleUrls: ["pages/login/login-common.css", "pages/login/login.css"] - do not forget to include variable in both files if you want to use them.