Nativescript: After Upgrading theme-core - File to import not found or unreadable: nativescript-theme-core/scss/light

Created on 25 Jul 2019  路  7Comments  路  Source: NativeScript/NativeScript

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

  • CLI: 6.0.2
  • Cross-platform modules: 6.0.1
  • Android Runtime: 6.0.0
  • iOS Runtime: 6.0.1
  • Plugin(s): [email protected]

Describe the bug
After upgrade nativescript-theme-core from ~1.0.4 to ^2.0.2. I can't import a light theme using this @import '~nativescript-theme-core/scss/light'. The error says...

Screen Shot 2019-07-25 at 2 10 21 PM

To Reproduce
Upgrade nativescript-theme-core to 2.0.2 and import to your css/scss file.

css question

Most helpful comment

@jannomeister the new version of nativescript-them-core is a major version meaning that it comes with some breaking changes. It is also a beta in active development.

Still, to use the 2.0.2 version refer to this updated README . Notice that the imports for scss files have changed as follows:

/* or alternatively SCSS: */

    @import "~nativescript-theme-core/core";
    @import "~nativescript-theme-core/blue";

All 7 comments

@jannomeister the new version of nativescript-them-core is a major version meaning that it comes with some breaking changes. It is also a beta in active development.

Still, to use the 2.0.2 version refer to this updated README . Notice that the imports for scss files have changed as follows:

/* or alternatively SCSS: */

    @import "~nativescript-theme-core/core";
    @import "~nativescript-theme-core/blue";

@NickIliev thanks for the quick response. For now I reverted back to the old version. :)

closing this one.

I made the suggested changes, had already made and the error is still happening.

ERROR in ./app.scss
Module build failed (from ../node_modules/sass-loader/lib/loader.js):

undefined
^
      File to import not found or unreadable: ./scss/core.
      in C:\Users\Admin\workspace\islamic-works\Islamic-App\node_modules\nativescript-theme-core\core.scss (line 8, column 1)
 @ ../node_modules/nativescript-dev-webpack/load-application-css-angular.js 5:49-65
 @ ./main.ts
Webpack compilation complete.
Executing webpack failed with exit code 2.
# tns prepare

I'm hitting the same error as @carlosdelfino on a project I migrated to {N} 6.0.

I reverted to version 1.0.6 and everything is working. This plug-in REALLY needs better information about breaking changes, and exactly what changes are needed, with examples, for existing code. For example, the readme says some javascript is required. Anywhere in particular? I'm guessing app.js, but is it the same for all project types?

And if you want to use the compat versions, what exactly is needed?

In order not to give up on using the project I took a drastic action and made the following insertion:
At least I always remember to check if the new versions are compatible.

@import "nativescript-theme-core/scss/core/_index";

Same problem here.

ERROR in ./app.scss
Module build failed (from ../node_modules/sass-loader/lib/loader.js):

@import '~nativescript-theme-core/scss/light';
^
      File to import not found or unreadable: ~nativescript-theme-core/scss/light.
      in /Users/roman/Desktop/eSports/Onlajny/src/_app-variables.scss (line 2, column 1)
 @ ../node_modules/nativescript-dev-webpack/load-application-css-angular.js 5:49-65 6:47-63
 @ ./main.ts
{
  "nativescript": {
    "id": "com.xx.xx",
    "tns-android": {
      "version": "6.1.0"
    },
    "tns-ios": {
      "version": "6.1.0"
    }
  },
  "description": "xx",
  "license": "SEE LICENSE IN <your-license-filename>",
  "repository": "<fill-your-repository-here>",
  "scripts": {
    "lint": "tslint \"src/**/*.ts\"",
    "update:packages": "rm -rf node_modules && npm install -g npm-check-updates && ncu -u && npm install "
  },
  "dependencies": {
    "@angular/animations": "~8.2.0",
    "@angular/common": "~8.2.0",
    "@angular/compiler": "~8.2.0",
    "@angular/core": "~8.2.0",
    "@angular/forms": "~8.2.0",
    "@angular/http": "8.0.0-beta.10",
    "@angular/platform-browser": "~8.2.0",
    "@angular/platform-browser-dynamic": "~8.2.0",
    "@angular/router": "~8.2.0",
    "@owen-it/nativescript-uuid": "0.0.4",
    "base-64": "^0.1.0",
    "lightstreamer-client": "7.3.1",
    "nativescript-angular": "^8.2.1",
    "nativescript-calendar": "2.1.0",
    "nativescript-feedback": "1.3.11",
    "nativescript-loading-indicator": "2.5.2",
    "nativescript-local-notifications": "4.0.1",
    "nativescript-modal-datetimepicker": "1.2.0",
    "nativescript-pager": "11.0.10",
    "nativescript-plugin-firebase": "9.1.1",
    "nativescript-status-bar": "1.2.0",
    "nativescript-theme-core": "2.0.5",
    "nativescript-ui-listview": "7.0.5",
    "nativescript-web-image-cache": "^5.0.0",
    "reflect-metadata": "0.1.13",
    "rxjs": "^6.4.0",
    "tns-core-modules": "^6.1.1",
    "zone.js": "^0.9.1"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~8.2.0",
    "@nativescript/schematics": "0.5.0",
    "@ngtools/webpack": "~8.2.0",
    "codelyzer": "~4.5.0",
    "nativescript-dev-webpack": "^1.2.0",
    "node-sass": "^4.7.1",
    "tslint": "5.12.1",
    "typescript": "~3.5.3"
  },
  "readme": "NativeScript Application"
}

Was this page helpful?
0 / 5 - 0 ratings