Adding CSS Files to Angular Bundle

Currently in the process of creating a tarball npm package via npm:

npm run build-release
npm pack dist/

Once that is done, I install the package in a different Angular application using npm install xxx.tgz. This allows me to use components from the first package, but I also need to access the .css files from that project.

Upon examining the generated xxx.tgz file, I noticed that none of the .css files from the project were included. How can I instruct npm to include them so that other projects installing this package can utilize variables defined in the CSS files?

cssangularproject.json

Answer №1

CSS gets compiled and packaged during the ng build process.

If you want to prevent this, you need to specify them as assets. This can be accomplished in the angular.json file (make sure you already include the style.css file in the assets array).

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

Unable to get CSS Filter to function properly in Firefox

I'm having trouble with the CSS filter on my Firefox (15.0) browser. Here is the HTML code: <div class="google"> <img src="https://www.google.com/images/srpr/logo3w.png"> </div> And here is the CSS code: .google{ -moz ...

htmlcss

Using TypeScript to implement Angular Draggable functionality within an ng-template

Sorry if this question has been asked before, but I couldn't find any information. I am trying to create a Bootstrap Modal popup with a form inside and I want it to be draggable. I have tried using a simple button to display an ng-template on click, b ...

angulartypescriptangular-ui-bootstrapdraggable

The height of the navigation bar adjusts to fit the image

I'm currently struggling with my html and css learning project. The height of the navigation bar is not adjusting properly to the size of the image. I have tried various solutions, but nothing seems to work. Any guidance would be appreciated! htm ...

htmlcss

What is the best way to ensure that an element remains fixed at the bottom of a div or card

I am currently working on creating cards that contain a link at the end. My goal is to have these links consistently displayed at the bottom of the div, regardless of the text length. Currently, they appear at the end of the text content. Is there an easy ...

cssbootstrap-4

Tips for aligning <hr> elements in line when text lengths vary before them

(The suggestion I received wasn't quite what I had in mind) I am facing an issue with <hr> elements appearing inconsistently after titles and text generated by ACF in PHP. The varying sizes of the titles and text cause the <hr> element to ...

phphtmlcssbootstrap-4

Pressing a button to alter the text color

While experimenting, I attempted to alter the text color of my HTML using JavaScript. After a few attempts, I came to the realization that I cannot change the color if I am already changing it in CSS. Does this mean CSS is executed at the end? Also, how ca ...

javascripthtmlcss

Unlocking the full width potential of your HTML page in the browser

Currently, I am utilizing Twitter Bootstrap 3.3.5 within my Grails application. However, an issue has arisen where my GSP view is not displaying in full screen. Is there a way to achieve full screen display without disrupting the responsive features of B ...

htmlcsstwitter-bootstrap

Using ASCII 3D text can create a stunning visual effect on a website, but it can sometimes appear

My website is displaying ASCII 3D Text with glitchy lines, but this issue is not present on other websites. Example 1: Glitchy lines visible on my website Example 2: A different website using the same text without any glitchy lines. No glitches detected h ...

javascripthtmlcsswebweb-testing

The specified 'image' identifier has not been defined. There is no such member within 'never'

Edit :: Finally, I managed to get the output successfully, but there's still an error that baffles me. https://i.stack.imgur.com/2wrNM.pngAlthough I've tackled similar issues in the past, this particular one seems elusive. I attempted using "?", ...

htmlangular

The ngbpopover feature does not seem to be applying the external CSS specified within the ng-template when the container attribute is set to "body"

I need my ngbpopover to display at the top of the parent element instead of below it. I added container="body" to ngbpopover which resolved this issue, but now the external CSS defined in ng-template is not being applied. <mat-tab-group animationDu ...

htmlcssangularangular-materialng-bootstrap

Angular: Issue with *ngFor not iterating through Array Objects

I have been attempting to iterate through my array of data, but I am not receiving any error messages or feedback at all. When I try to iterate through an object, I encounter the following error message, but the elements are still being created: Error: NG ...

angulartypescript

Unable to retrieve the key value from a child object in Angular 2 when working with JSON Data

Currently, I am using Angular and attempting to extract data from the child object's key value. Here is the JSON data provided: "other_lessons": [ { "id": 290, "name": "Christmas Test #290", "course": { "id": ...

jsonangulartypescript

How to configure headers in Angular 5

When logging in a user, the function returns a token in the response body which is then set in the headers. this.headers = new HttpHeaders({'Content-Type': 'application/json'}); loginUser(email, password) { const body = {emai ...

javascriptnode.jsangularangular5

Layout with no defined boundaries in a grid formation

Is there a way to remove the border from each corner of a grid, similar to the attached image, without using specific classes for each column? The grid generates columns dynamically based on data. Can you provide guidance on how to achieve this? Fiddle H ...

css

Ways to position a button at the bottom of a div and beneath an image

Hey there, I have a little issue that seems to be causing me trouble. My brain just can't seem to come up with the solution. Here's the HTML code: #div { position: fixed; top: 10%; left: 20%; right: 20%; bottom: 10%; ...

htmlcss

Ways to eliminate undesired margin

I am struggling with formatting an HTML list into columns and I can't seem to remove the space between each column. It's frustrating because I want the list to display like rows, without any spacing or at least the ability to control the size of ...

htmlcsshtml-lists

Angular | Boosting performance with asset chunking

This particular inquiry mirrors 92% chunk asset optimization - webpack. However, a satisfactory solution has yet to be found. Typically, I utilize ng serve or nmp start to initiate my service locally and it functions correctly. However, on an EC2 instance ...

node.jsangularnpmwebpacknpm-update

Is it possible to use JavaScript to make a CSS animation mimic the behavior of a :hover effect?

My CSS animation looks like this: HTML: <div class="container" id="cont"> <div class="box show"></div> </div> CSS: .container { width: 100vw; height: 100vh; } .box { position: absolute ...

javascripthtmlcss

Issue with Angular 2's event emitter malfunctioning

I have a dashboard component and a bottom-nav component. When the setting icon in the bottom-nav component is clicked, I want an alert to appear in the parent dashboard component. Here is the code: dashboard.component.ts ===== html part ====== <div cl ...

angular

Why doesn't the CSS height of Textarea work in Internet Explorer versions 6 and 7?

Here is my code: <!DOCTYPE html> <html> <head> <title>Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body { background: n ...

cssinternet-explorer-7internet-explorer-6