error running app.css when i download from nativescript playground

Question

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

Manoj · Accepted Answer · 2019-09-07 16:11:15Z

1

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';

answered Sep 7, 2019 at 16:11

Manoj

21.9k3 gold badges24 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ani Aggarwal · Accepted Answer · 2019-09-07 03:04:46Z

0

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.

answered Sep 7, 2019 at 3:04

Ani Aggarwal

3714 silver badges16 bronze badges

2 Comments

Jimmy Hendrix Over a year ago

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

Ani Aggarwal Over a year ago

Can you post your directory structure?

Praveen Kumar · Accepted Answer · 2023-01-26 14:03:10Z

0

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';

answered Jan 26, 2023 at 14:03

Praveen Kumar

913 bronze badges

Collectives™ on Stack Overflow

error running app.css when i download from nativescript playground

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related