Nativescript CSS - Issue: the first parameter in require must be a string

When attempting to create platform-specific CSS for my app component, I encountered an error. While my android.css file is functioning properly, the common.css file is not working. Any insights as to why this may be happening?

JS: Error: /app.component.common.css does not start with /data/data/org.nativescript.portalestapp/files/app

JS: Error: Could not load CSS from /app.component.common.css: Error: require's first parameter should be string

The files I have include:

- app.component.html

- app.component.ts

- app.component.common.css

- app.component.android.css

- app.component.ios.css

In app.component.ts :

@Component({
    selector: "ns-app",
    moduleId: module.id,
    templateUrl: "app.component.html",
    styleUrls: ["./app.component.css"]
})

In app.component.common.css :

.page{
    background-color: #F4F5F7;
    font-family:Poppins-Regular, Poppins
}

.custom-action-bar {
    background-color:transparent;
}

In app.component.android.css :

@import "/app.component.common.css";

.page {
    background-color: #fffffffa;
}

Answer №1

page{
    background-color: #F4F5F7;
    font-family:Poppins-Regular, Poppins
}

custom-action-bar {
    background-color:transparent;
}

Make sure your initial input is a string

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

Personalizing Bootstrap 5 button designs and attributes for a customized look

In my project, I've set up my custom.scss file with the following code: $primary: #e84c22; $theme-colors: ( primary: $primary, ); @import "~bootstrap/scss/bootstrap.scss"; Currently, the color looks like this: https://i.sstatic.net/lbL ...

The final position of the Angular increment animation does not hold

Is there a way to trigger an animation when the value of countAllOrders changes? Specifically, I am attempting to adjust the margin of a list using keyframes in an Angular animation. Here is my HTML code: <ul class="digits" [@ordersValue]=&q ...

Is it possible for a search box selection toggle to reveal a hidden information box underneath it containing all the compiled data?

Improve the user experience on my website by implementing a search feature for US states and Canadian territories. When visitors type in their selection, I want them to be able to click on an icon that will reveal relevant information about that choice. T ...

"Angular TypeScript throws an error when a variable is assigned but remains undefined

I am currently facing an issue with the code snippet provided below. The constructor is utilizing router methods to retrieve the previous route and store a variable in it. However, when I call `ngOnInit()`, which then triggers another method that compares ...

Using AngularJS to Retrieve a Specific DOM Element Using its Unique Identifier

Example Please take a look at this Plunkr example. Requirement I am looking for a way to retrieve an element by its id. The provided code should be capable of applying a CSS class to any existing DOM element within the current view. This functionality ...

Most bizarre glitch in IE9 found (disable internet, watch page display go haywire)

My local webserver (apache) on my laptop is successfully serving up a content management system that looks fine in both IE9 and Firefox. However, when attempting to demo it without an internet connection, the elements were misaligned and looked terrible i ...

Overlapping Issue with Angular Bootstrap Dynamic Dropdown Menu

I'm currently working on creating a dynamic menu using Angular and Bootstrap for Angular. My main issue right now is that the submenus are overlapping each other when displayed on the page. To tackle this problem, I started off by referring to the ex ...

Modifying the DOM in Safari before unloading a webpage

I need a way to display a loading animation when I navigate between pages on my website. To achieve this, I have added the following HTML code for the loader: <div class="ajax-loader"><i class="icon-spin5"></i></div> And here is t ...

Showing tags with varying sizes

https://i.sstatic.net/oo3MP.png Is there a better way to organize and display my content? I have an array of elements that I want to display like the example above. I attempted using lists, but it didn't work out as expected. Here's what I&apo ...

Troubleshooting the integration of CSS modules with my Express application

After working with CSS in a single file for quite some time on my current project, I've realized it has become too lengthy and difficult to manage. To make editing easier, I am now looking to modularize my CSS code. While I have experience doing this ...

Creating tabbed content with a classless CSS design by utilizing radio buttons instead of the traditional unordered

I am attempting to transform the classless CSS and HTML provided below from a list format to using radio buttons and labels for tabbed content. My goal is to make it concise and avoid redundancy. Here is the setup of what I am aiming for: <nav> ...

Navigate to an element by scrolling from the bottom of the page

I am trying to implement a feature where the page will automatically scroll to a button that is positioned around 300px from the bottom of the page. https://i.sstatic.net/XN0yL.png Whenever this particular button is clicked, I want the body of the page t ...

Refresh the page and witness the magical transformation as the div's background-image stylish

After browsing the internet, I came across a JavaScript script that claims to change the background-image of a div every time the page refreshes. Surprisingly, it's not functioning as expected. If anyone can provide assistance, I would greatly appreci ...

Transforming navigation bar icons to active using Django and JavaScript

I recently created a navbar using Bootstrap 4 and I'm looking for a more efficient way to toggle the active icon on the current page. Here's my current setup: <li class="nav-item"><a href="/" id="A" {% if request.p ...

Designing a webpage tailored to a particular internet browser

My website is built on asp.net-mvc3 and I have customized the layout using CSS. While it looks perfect on Firefox and Chrome, Internet Explorer displays it in a jumbled mess. I am now faced with the task of fixing this issue without disrupting the layout ...

CSS fixed dynamically with JavaScript and multiple div elements placed randomly

Is it possible to dynamically change the position of multiple div elements on a webpage without reloading? I am looking for a way to modify the top and left positions of several divs, all with the same class, simultaneously. I want each div to have a diff ...

Minimizing the Height of HTML Table Rows

I have a table with a few rows. I'm trying to set the height of the 1st and 3rd rows to 1px and keep the 2nd row at normal height. However, my code isn't working as expected. Here is the HTML CODE: <table border="0"> <tr style="hei ...

The wrapAll() method can be used to wrap list items within two columns

I am looking to group multiple li elements within two div containers by using jQuery's wrapAll method. The challenge lies in the fact that these items are rendered within a single <ul> element via a CMS. Here is the current setup: <ul> ...

Having trouble creating a new module in Angular - Issue with rule result: Function()

I've been working with Angular and I'm trying to create a new module using the command: ng g m --name moduleName --routing. However, I keep encountering the error message: Invalid rule result: Function(). https://i.sstatic.net/nixaI.png If anyo ...

Creating a WordPress child theme within a child theme can be quite perplexing!

I'm encountering some challenges while attempting to create a child theme for Orfeo, which itself is a child theme of Hestia, both developed by Themeisle. Is there a way around this issue? I am referring to the style.css header of Orfeo, and I am uns ...