Importing styles from an external URL using Angular-cli

How can I load CSS styles from an external URL?

For instance, my domain is domain.eu but my site is located at sub.domain.eu. I want to use styles that are stored on the main domain (common for all sites).

The example below does not work:

"styles": [
    "styles.css",
    "http://domain.eu/themes/css/common.css"
  ],

The issue is that webpack tries to bundle these styles and cannot retrieve them. When I import them via CSS like this:

@import('url');

It will not break, but will have problems with missing assets such as images or fonts.

The only solution seems to be adding the external CSS style into index.html. Is it possible to set this value dynamically?

If we have three different themes defining basic fonts and header styles, and we want to change them based on a route or select option element inside a component, is there some sort of hack or workaround to achieve this?

Answer №1

Absolutely, it is possible to include style by using an external CSS file in your @Component with styleUrls: ['file name.css']

Answer №2

Currently, your usage is

"styles": [ "styles.css", ""]

This method allows you to directly write CSS for the specific component. If you wish to include CSS from other files, consider using this format instead:

styleUrls: [ 'styles.css', '' ]

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

What is causing nth-of-type to behave like nth-child?

My goal is to alternate colors for elements with a certain class, ignoring any elements of different classes in between them. Despite my attempts to use nth-of-type, I have encountered issues with its functionality in Firefox and Chrome. http://jsfiddle.n ...

A specific class has no border on its left side

Is there a way to use CSS to disable the left border to the right of a cell with a specific class? In the scenario shown in this image, the right border appears double due to the combination of the "selected" class border and the default gray border. I wo ...

Adding the active class in Bootstrap can be easily achieved in CodeIgniter by using the

I am seeking guidance on how to add an active class in CodeIgniter when dividing the view into three separate files. These files include: header.php page1.php ... page10.php footer.php According to this thread, there seems to be no clear solution prov ...

Server blocking access to Javascript files

Having some trouble with my code, it works fine on Localhost but not on Fasthosts server. Seems to be an access issue to a folder on the server, here are the debug messages: GET (http://reggarockaboogie.co.uk/images/gallery/fld01/) 403 (Forbidden) k.cors ...

Creating a interactive navigation bar with External JSON data in HTML and JavaScript

Is there a way to create a dynamic MenuBar by using an external JSON file? How can I write HTML code to fetch and display JSON data dynamically? What is the process for reading a JSON file? //JSON File = Menu.Json {"data": [{"id": "1", "text": "F ...

Attempting to obtain a score value from the input, but unsuccessful in doing so

Prior to posing this question, I had already managed to successfully retrieve the score value. Below is my original script: <script> $.ajax({ type: "POST", url: "https://example.com/paylist.php?acc=useraccount&json=1", ...

Guide on navigating an array of objects using the provided keys as a starting point in Javascript/Typescript

Assuming I have an array of objects structured like this: const events: Array<{year: number, month: number, date: number}> = [ {year: 2020, month: 10, date: 13}, {year: 2021: month: 3, date: 12}, {year: 2021: month: 9, date: 6}, {year: 2021: mont ...

Error: Unable to locate module 'next/font/google/target.css'

After setting up Next.js version 14.0.1 on Node.Js v20.9.0 and Ubuntu 20.04, I encountered an error right from the start. Failed to compile /var/www/html/C#/nextApp/app/layout.js Module not found: Can't resolve 'next/font/google/target.css?{&quo ...

Angular Persistent States in Angular version 2 and beyond

Currently, I am in the process of transitioning an Angular 1.5.X application to Angular 4. Within my app, I incorporate Angular Ui-Router Sticky State from https://github.com/ui-router/sticky-states to prevent loss of content within my view when navigating ...

Step-by-step guide on loading an external javascript file once a webpage is fully loaded, and incorporating a function from it

After the initial page load, I have a need to incorporate an external JavaScript file into an HTML file. This is necessary because a variable in this external JS file only updates after the HTML file has fully loaded. Additionally, I want to utilize the fu ...

Using Angular 2 with the firebase-admin sdk

Whenever I attempt to integrate the firebase-admin SDK into my Angular2 project, an error occurs: ERROR in ./~/firebase-admin/lib/auth/token-generator.js Module not found: Error: Can't resolve 'jsonwebtoken' in '/home/koucky/git_projec ...

The precedence of theme CSS is paramount

Check out this link for Smirnoff Espresso Vodka 70cl (password: hide) Upon inspecting the page source, you'll see that my main stylesheet (main-style) is loaded at the top of the head section with high priority, even above my theme's style. Why ...

Discovering the specific value within an array of various objects through Angular

Within a list of objects, I am specifically looking to extract the name "sample 4" from the second set of objects with an ID of 2. How can this value be retrieved using JavaScript or Angular? {Id: 1, name: sample 1, code: "type", order: 1} {Id: 1, name: ...

Is there a way to display images in Vuetify similar to the linked image below?

I am looking to measure my v-img like the one shown in the image below. https://i.stack.imgur.com/edMKr.jpg Does anyone know how I can achieve something similar to the image shown using vuetify's v-img. <div class="row"> <v ...

Encountering an issue with Angular where downloading a zip archive using the HttpClient API results in

Within our Angular5 web application, we are utilizing an API to retrieve a zip archive (Back-end is ASP.NET Core 2.1 using SharpZipLib). Previously, everything functioned correctly when using the old HTTP API provided by Angular :) However, after upgradin ...

When I try to open my modal in Electron by clicking on the button, it doesn't work

I was expecting the modal to open by clicking on the Edit button within #app, but it doesn't open at all! I am unsure if there is an issue with my JavaScript logic or my HTML code! When attempting to use a function for the Modal, it still does not wo ...

Utilizing Angular's mat-slide-toggle along with a numeric input form

Check out this snippet of Angular code : <mat-slide-toggle formControlName="device_maintenance_mode" [(ngModel)]="isChecked">Maintenance Mode : {{isChecked}} </mat-slide-toggle> <mat-fo ...

JavaScript will continue to process the submit to the server even after validation has been completed

My current challenge involves implementing form validation using JavaScript. The goal is to prevent the form from being sent to the server if any errors are found. I have made sure that my JavaScript function returns false in case of an error, like so: ...

Is there a way to remove this annoying line? Or perhaps just reformat it somehow?

I seem to be overlooking a small detail. I have created an html table with Bootstrap5 css, but I am struggling with the formatting. How can I remove the black line or adjust the boldness of the text in the table header? Check out the Table Header Row Bel ...

What is the best way to crop an image to focus solely on the center portion?

Using Bootstrap 3, how can I display an image cropped in a .col-sm-6 grid column? The image is 720px wide. Typically, with the .img-responsive class, the image will resize proportionally when the display size changes. However, I want to crop the left and ...