CODEWITHSUNDEEP
cssangulartypescriptnativescript
Jimmy Hendrix
Jimmy Hendrix

Reputation: 69

error running app.css when i download from nativescript playground

this is the error im getting...

ERROR in ./app.css
Module not found: Error: Can't resolve './nativescript-theme-core/css/core.light.css' in 'C:\Users\elish_n8zkzh8\Downloads\bandz test\app'
 @ ./app.css 3:10-116
 @ ../node_modules/nativescript-dev-webpack/load-application-css-angular.js
 @ ./main.ts

ive tried installing zone.js for the npm warnings but it didnt work and commented out the importation and that worked but missing key features

@import "nativescript-theme-core/css/core.light.css";

.btn-primary {
  height: 50;
  background-color: #D51A1A;
  border-radius: 5;
  font-size: 20;
  font-weight: 600;
}
.btn-primary:disabled {
  opacity: 0.5;
}

i need the css to render

Upvotes: 2

Views: 1350

Answers (3)

Praveen Kumar
Praveen Kumar

Reputation: 91

latest version of nativescript (>6.0.0) uses theme core. Create a new file _app-common.scss and add below statements on top.

@import '@nativescript/theme/core';
@import '@nativescript/theme/default';
//Rest of the css

Create android specific file app.android.scss and import the above file in it. @import 'app-common';

Upvotes: 0

Manoj
Manoj

Reputation: 21908

I'm not sure how you did end up with code below, but when you download form Playground it gives you right syntax.

@import "nativescript-theme-core/css/core.light.css";

You have to add tilde (~) at the front when you import a CSS or SCSS file from node modules. So it should be,

@import '~nativescript-theme-core/css/core.light.css';

Upvotes: 1

Ani Aggarwal
Ani Aggarwal

Reputation: 361

It appears that you are trying to use nativescript css framework within your angular project and it's complaining about the path. The path you are specifying is incorrect.

All the paths you specify in app.css are relative to your project directory so you should import using the following.

@import "node_modules/nativescript-theme-core/css/core.light.css";

Also another better approach will be to include the resource used in your project in the angular.json of your project. Those resources are packed along with your application code by webpack and are made available globally.

See this to know more: https://angular.io/guide/workspace-config#style-script-config

I hope it helps.

Upvotes: 0

Related Questions