How to Include CSS Folders in Angular 6's angular.json File

I am in the process of converting my HTML template into an Angular app. In my project, I have a CSS folder named plugins and an image folder.

However, when I try to add the following code snippet to the angular.json file:

 "styles": [
          "src/assets/plugins/listtyicons/style.css",
          "src/assets/plugins/jquery-ui/jquery-ui.min.css",
          "src/assets/plugins/bootstrap/css/bootstrap.min.css",
          "src/assets/plugins/isotope/isotope.min.css",
          "src/styles.css"

        ]

I encounter an error when attempting to start the Angular app. My plugin folder is located inside the assets folder and the error message reads as follows:

 ERROR in multi ./src/assets/plugins/listtyicons/style.css 
./src/assets/plugins/jquery-ui/jquery-ui.min.css ./src/assets/plugins/bootstrap/css/bootstrap.min.css ./src/assets/plugins/isotope/isotope.min.css ./src/styles.css
Module not found: Error: Can't resolve 
'/Users/nilay/angular/bes/src/assets/plugins/plugins/isotope/isotope.min.css' 
in '/Users/nilay/angular/bes'

This error has me puzzled and I can't seem to figure out why it's occurring.

cssangular6

Answer №1

When working with angular 6, you will need to make sure to include the following imports in your src/style.css file, instead of the angular.json:

@import "assets/plugins/listtyicons/style.css";
@import "assets/plugins/jquery-ui/jquery-ui.min.css";
@import "assets/plugins/bootstrap/css/bootstrap.min.css";
@import  "assets/plugins/isotope/isotope.min.css";

Also, ensure that in your angular.json file, you have the following:

"styles": [
          "src/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 the best way to add an image to a SVG placeholder?

This is all unfamiliar territory for me. I am experimenting with the Bootstrap template named "Carousel" as my starting point, utilizing Bootstrap 5.3.2. Here is the link to the Carousel example Everything seems fine so far. However, I am struggling to l ...

htmlcsssvgbootstrap-5

Tips for modifying the appearance of an anchor <a> element within a table cell with jQuery

One issue I am facing involves changing the style of a specific element within a table cell using jQuery. The change needs to be based on the value in another cell. Below is the table structure: <table id="table"> ...

javascriptjqueryhtmlcss

Can you point out the syntax error in my flex code?

I'm attempting to redesign my layout grid using flex. It seems that the flex code I commented out is incorrect, possibly due to an issue with setting the width in my .container class. The grid auto property adjusts the columns automatically within my ...

htmlcssflexboxcss-grid

What is the correct method in CSS to resize an image while maintaining its proportions within a div container?

I've been struggling to properly insert images into a <div> element on my website. I've experimented with various techniques, such as setting max-width and max-height to 100%, changing the display property of the parent element to flex, and ...

htmlcss

Can an HTML element have a dynamic scrollbar?

Is it possible to create a dynamic scrollbar with primefaces p:panel? Whenever I add the div, the scrollbar appears fixed on the page. How can I make this div position itself according to the user's browser, specifically within a p:panel? ...

csshtmlprimefaces

Angular 4 allows the addition of an image from right to left upon clicking

I've been working on angular 4 and I've successfully implemented the functionality of adding flags. However, the issue is that the flags are currently appearing from left to right. What I'm aiming for is to have the images appear from right ...

htmlcssangular

Creating a centralized form on the webpage

What steps can I take to modify my code to match the structure shown in the image? At present, my code appears as follows: <form id="form" action="/action_page.php"> Login ID:<br> <input type="text" name="id" id="id"> <br ...

htmlcss

CSS3 animations with background-image for Firefox are an exciting way to enhance the

I am currently working on a keyframe animation project using CSS. The animation is running smoothly in Chrome with supported -webkit syntaxes. @-webkit-keyframes title_toggle { from { background-image:url(images/title.png); } 75%{ background-image:url(im ...

htmlcssfirefoxanimationkeyframe

When state updates in React, the component will rerender without affecting its style

There seems to be a minor oversight on my part. The issue arises in the parent component where I maintain a state of selected items, which are added from the child component. The background color of the child component changes when an item is selected. Ad ...

javascriptcssreactjsreact-hooks

issue arising where the table's border is not displaying

I'm confused about why the border of the first tbody tr's td is not visible. https://i.stack.imgur.com/Fwlv7.png I can't see any reason why the border is not showing up. Here's what I've figured out: If the natural height of th ...

csshtml-tableborder

Can I use the mouseover event on an image to display a sibling div?

Hi everyone! I'm fairly new to web development and I could really use some advice. I'm trying to implement a mouseenter event on an img tag to show a sibling div, but I'm encountering some strange behavior. The mouseenter event seems to be w ...

javascripthtmlcss

Is it possible to adjust the position of a h2 heading on a particular webpage using CSS?

There is a situation where multiple pages contain h elements nested inside a standard container div class. When trying to edit a specific h2 element in a specific page using CSS, simply editing the h2 or the container does not work. Other methods attempte ...

jqueryhtmlcsscontainers

Troubleshooting issues with jQuery background-position animation and CSS sprites functionality

Trying to add animation to my navigation links background using a Css sprite. Check out the picture here: $(document).ready(function(){ $('nav a') // Move the background on hover .mouseover(function(){ $(this).stop().animate({ba ...

jqueryhtmlcsscss-spritesbackground-position

Animate all shapes in SVG to rotate around a central pivot point

I am looking for a simple way to make an SVG graphic rotate around its center point. The rotation doesn't need to be smooth, just a 90 degree turn and back every second. https://i.sstatic.net/H6CTF.png Here is the SVG code: <?xml version="1.0" e ...

cssanimationsvgrotation

Is it possible to adjust the default zoom level of my website by utilizing HTML or CSS?

After creating my website with a 50% zoom setting, I've encountered an issue where it appears too zoomed in for users whose browser default is set at 100%. How can I fix this problem? I attempted to use *{zoom:50%} in CSS to set the default zoom leve ...

htmlcss

How can I centrally align the text(link) vertically in relation to its background image?

After setting the background color, height, and width of a link using CSS, I managed to align the text(link) center horizontally by applying the "text-align: center" property. However, I am facing difficulty in vertically centering it with respect to its ...

htmlcss

having trouble with developing a dropdown menu using jquery

I'm currently creating a drop-down menu for my website and here is the code I'm using: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html dir="ltr"> <head> <met ...

javascriptjquerycssmenu

Ionic - encountering crashes with ion-nav-view on emulator

I am encountering an issue with ion-nav-view. Whenever I try to use it, the emulator displays a black screen, but it works perfectly fine in ionic serve. I suspect it may be a syntax error causing this problem. Interestingly, when I create a blank projec ...

javascripthtmlcssangularjsionic-framework

An interesting approach to utilizing toggle functionality in JQuery is by incorporating a feature that automatically closes the div when

Currently, I am utilizing JQuery's toggle function to slide a ul li element. However, my desired functionality is for the div to close if someone clicks outside of it (anywhere on the page) while it is in the toggle Down condition. Below, you'll ...

javascriptjqueryhtmlcss

Position two in-line divs at the bottom, one on each side

I am in search of a way to dynamically position two elements at the bottom of a container, making sure they are at opposite corners. Much like how the Stackoverflow Logo and the Ask Question are aligned at the bottom but on different ends of their containe ...

htmlcss