Issue encountered while attempting to run app.css file downloaded from Nativescript Playground

Encountering an error with my code...

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

I attempted to install zone.js to address the npm warnings, but it did not resolve the issue. I also tried commenting out the importation, which worked but caused me to lose some 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;
}

It is crucial for the CSS to render correctly.

cssangulartypescriptnativescript

Answer №1

It's interesting how you ended up with the code below, but typically downloading from Playground should give you the correct syntax.

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

Remember to include a tilde (~) at the beginning when importing a CSS or SCSS file from node modules. So the correct format would be:

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

Answer №2

It seems like you are attempting to integrate the nativescript css framework into your angular project, but encountering errors related to the file path. The path you have specified is incorrect.

Remember that all paths specified in app.css should be relative to your project directory. You should import using the following format:

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

Alternatively, a better approach would be to include the resources used in your project within the angular.json file. These resources will then be bundled along with your application code by webpack and made globally accessible.

To learn more about this process, please refer to: https://angular.io/guide/workspace-config#style-script-config

I hope this explanation helps resolve your issue.

Answer №3

The most recent update of nativescript (version >6.0.0) now incorporates theme core. To implement this, start by creating a new file called _app-common.scss and include the following statements at the beginning:

@import '@nativescript/theme/core';
@import '@nativescript/theme/default';
//Additional CSS code here

Next, create a specific file for android named app.android.scss and import the previously created file in it using @import 'app-common';

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Align two distinct images using CSS

Is it possible to insert two images in CSS and center them both? I am aiming for a layout similar to this: link My current CSS code only centers one image: position: absolute; top: 0; bottom:0; left: 0; right:0; margin: auto; ...

cssimagecenter

What is causing find_by_css to return nothing when using nth-child?

Currently, I am facing an issue when trying to extract the "href" link from the following HTML code: https://i.stack.imgur.com/Gtzf4.png This is the code that I'm using: from selenium import webdriver from splinter import Browser from bs4 import Be ...

pythoncsspython-3.xseleniumbeautifulsoup

Forced line break at particular point in text

I would love to implement a line break right before the "+" character, either using css styling or through a different method. Is this task achievable? #myDiv{ width: 80% } #myP{ c ...

javascriptjquerycss

Having trouble setting a background image for a specific DIV element in HTML

I am in the process of updating my webpage, and need some assistance implementing a small background image. Here is what I have done so far: https://i.sstatic.net/nTxtD.png Below is the marked section where I am trying to add the background image: https ...

javascripthtmlcss

angular 6 personalized material icons with ligature assistance

Can I create my own custom material icons with ligature support? Currently, I use svgIcon to get Custom Icons, Is there a way to make custom icons that support ligatures? Here is my current code snippet: app.component.ts import { Component } from &ap ...

angulartypescriptangular6google-material-iconsligature

Mastering the Art of Adding Headers in Angular

Here is the Angular service code: getCareer(dataout: any){ let headers = new HttpHeaders().append('Content-Type', 'application/json').append('Authorization','Bearer'+' '+GlobalService.authToken); //hea ...

angularhttp-headers

When you scroll a fixed element on the page, the block is truncated

I made a modification for adding cart items and included a script for managing my cart The cart is supposed to stick to the right edge and scroll up and down on the page Everything seems to work, but there's a slight issue when I click on Add 1 and ...

javascripthtmljquerycss

Verify in Typescript if there is at least one value supplied

Looking for a solution: function takeOneOfOrThrow(firstOptionalVariable : string | undefined, secondOptionalVariable : string | undefined) { let result : string; if (!firstOptionalVariable && !secondOptionalVariable) { throw new E ...

typescript

Is there a way to customize the ::selection style using mui createTheme?

I'm looking to globally change the color and background color of ::selection in my app. Can anyone advise on how to achieve this using createTheme()? ...

javascriptcssreactjsmaterial-ui

Center-align the text in mui's textfield

What I'm looking for is this: https://i.stack.imgur.com/ny3cy.png Here's what I ended up with: https://i.stack.imgur.com/vh7Lw.png I attempted to apply the style to my input props, but unfortunately, it didn't work. Any suggestions? Than ...

javascriptcssmaterial-ui

Customizing the initial page layout in Elm

I am new to Elm and I need help with a particular issue. Can someone provide guidance or direct me to a useful resource for solving this problem? The challenge I’m facing involves editing the start page of a website by removing specific elements, as list ...

javascripthtmltypescriptsasselm

The visual effect of SVG feColorMatrix filter appears distinct from that of CSS filter (sepia)

After researching on , I discovered that SVG filters, specifically using feColorMatrix, can be used to create a sepia effect. Despite following the instructions, I encountered difficulty in reproducing the desired image effect and am seeking clarification ...

csssvg-filters

Tips for avoiding a React component from causing the page to freeze post-loading

Currently, I am utilizing the uiwjs/react-json-view library to display JSON data. However, there seems to be an issue when attempting to load a large JSON file as it causes the page to freeze. To address this problem, I have already implemented Suspense an ...

reactjsjsontypescriptcomponentslazy-loading

Expanding Bootstrap 5 navbar-nav to occupy entire screen space in collapsed state

Hello everyone, I hope you are doing well! I am currently working on a website project using Bootstrap 5 and have encountered an issue with the navbar toggler. While the toggler is functioning properly, I am having trouble making it fill the full width o ...

javascripthtmlcssnavbarbootstrap-5

Using CSS transforms to place the vanishing point

I am attempting to utilize CSS transforms to create a flat 'floor' that extends infinitely towards the horizon. The vanishing point, where the floor disappears into the distance, should align halfway up the browser window. I have encountered an ...

csstransform

Issue with PassportJS and Express 4 failing to properly store cookies/session data

I have a situation with my Express 4 app using Passport 0.3.2. I've set up a passport-local strategy, and it's successfully retrieving the user information when the /session endpoint is provided with a username and password. The issue arises whe ...

javascriptnode.jsexpresscookiestypescript

Guide on executing synchronous operations using httpclient

I am facing an issue where I need to make multiple HTTP requests but I am struggling to synchronize them. Here is the code snippet where I am trying to achieve this. I am having difficulty setting the cartId value from the HTTP service, although I can suc ...

angularhttpclient

Strategies for extracting the type argument from a nested property and transforming it into a different value

I’m struggling to find the right way to frame my question, so I’ll provide an example of what I need help with. Let's assume I have the following object: const obj = { one: 'some string', two: new Set<string>(), }; Now, I wan ...

typescripttypescript2.8conditional-types

"In Nextjs, it is not possible to utilize the alert function or assign variables directly to the window object

Are you attempting to quickly sanity test your application using the window object's alert function, only to encounter errors like "Error: alert is not defined"? import Image from "next/image"; alert('bruh'); export default function Home() ...

reactjstypescriptwebpacknext.jsjsx

Interactive feature allowing all embedded YouTube videos on a webpage to play synchronously, with sound disabled, and on a continuous loop

I am in the process of developing a button that, when clicked by a user, will trigger all embedded YouTube videos on a specific webpage to start playing simultaneously, with sound muted, and set to loop. The target page for this button implementation can ...

javascripthtmljquerycss