Bring in the SCSS using a relative path with Angular CLI

When trying to import a *.css file into a .scss using the @import rule, I encountered some issues. The .css file contains relative path references like url('path') and is part of an imported library located in the node_modules directory.

My .component.scss file looks something like this:

@import "~libName/dist/icon";

Even though it is imported by .component.ts, that doesn't seem to have any effect.

The 

node_modules/libName/dist/icon.css
file includes the following code:

src: url("icons/SAP-icons.woff") format("woff");

During building, an error is thrown stating that it cannot resolve some files.

(Emitted value instead of an instance of Error) CssSyntaxError:
, because the icons/icon.woff referenced in icon.css cannot be found due to an incorrect relative path.

This issue occurred while working with angular v.7.3 along with CLI.

cssangularsassangular-cli

Answer №1

In order to reference the root directory of the project, you can utilize {}

@import "{}/node_modules/module-name/stylesheet";

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 method for customizing the default dropdown color of a bootstrap 4 selectpicker?

In my form, there are single and multiple dropdown selects. To keep things simple, I use the selectpicker class for both types. However, I want to customize the default grey color for Bootstrap 4 Dropdown with the selectpicker class to a clear color. Which ...

htmlcssbootstrap-4bootstrap-selectbootstrap-selectpicker

Using Google Fonts with AMP and Ruby on Rails: A Challenging Task

I am currently in the process of implementing AMP pages on my Rails application. Unfortunately, I am facing difficulties with getting my font to display correctly. The Google Search Console is returning the following error message: "CSS syntax error in th ...

htmlcssruby-on-railsamp-htmlgoogle-fonts

The image shape at the bottom of the screen may disappear on certain resolutions

I've added a unique curvy shape at the bottom of the image on a bootstrap card I designed using bootstrap 5. Everything looks great on resolutions above 1400px, but on smaller screens, the shape disappears, leaving the image rectangular. I've tri ...

htmlcssbootstrap-5card

Executing a function in Angular depending on the values emitted by two distinct observables

As someone who is relatively new to Angular (6 months), I am facing a challenge with my code. Currently, I have two observables that are working independently of each other: this.siteService.siteChanged$ .pipe(takeUntil(this.disconnect$)) .subscribe(_ ...

angulartypescript

Using CSS height 100% does not function properly when the content overflows

Here's what's going on with this code snippet: HTML <div class="one"> <div class="will-overflow"> </div> </div> CSS html, body { width: 100%; height: 100%; } .one { height: 100%; background: r ...

javascripthtmlcss

Struggling to update the inner HTML of a <p> tag using LocaleDateString() function

Recently, I've been experimenting with creating a calendar but encountered a frustrating issue. I created a variable storing a date using the toLocaleDateString method. However, when attempting to modify a paragraph's inner HTML, nothing seemed t ...

javascripthtmlcss

What are the different ways in which :style is utilized in re-frame - with brackets, curly brackets, or simply without any characters?

For my current project, I am utilizing Clojure, ClojureScript, lein, shadow-cljs, Emacs, and CIDER to develop a dynamic web application. Typically, when building the project, I initiate the command cider-jack-in-cljs in Emacs, select shadow-cljs, opt for ...

javascriptcssclojureclojurescriptre-frame

Utilizing JavaScript and jQuery libraries in conjunction with periods

I am a bit puzzled about when to include the period before referencing class names. For instance, in this code snippet, why is a period included before the first use of the 'active-slide' class but not for the other two instances? var primary = ...

javascriptjqueryhtmlcss

Arithmetic operations cannot be performed on the values generated by an observable interval

I am attempting to multiply interval emitted values by 10 in order to create a resulting stream like: 10, 20, 30 ... However, I am facing an issue where the compiler throws an error when trying to use the map method. const numbers$ = Observable.interval(1 ...

javascriptangularrxjsobservable

Enable lazy loading to retrieve the current routed module

I'm currently working on a way to exclude a component when a specific module is routed in a lazy loading application. For instance, in my AppComponent I have a router-outlet and a component above it: <div> <my-component></my-compo ...

angulartypescriptlazy-loading

The background image is not showing up

I've been grappling with a CSS background-image dilemma that's got me stumped. Here's the situation: CSS #yes { background-image:url("../tick.png"); background-repeat: no-repeat; height: 16px; width: 16px; }​ #no { backg ...

cssbackground-image

Ways to align an image and text vertically next to each other within a div

After coming across the solution for ''Vertical Align in a Div ", I decided to implement Adam's answer. However, my challenge lies in figuring out how to display both an image and text side by side with the text centered vertically. View My ...

htmlcss

The bottom border of the check boxes is not displaying in Internet Explorer

https://i.stack.imgur.com/EAkMC.pnghttps://i.stack.imgur.com/ysU1R.png While the checkboxes function correctly in Chrome, they are experiencing issues in Internet Explorer. Below is the HTML code being used: <div class="patient-div-w" style="width: 9 ...

htmlcss

Exploring variables within an Angular2 component's view

Is there a way for me to access and display the coordinates in my template? export class DashboardPage { constructor(public navCtrl: NavController) { Geolocation.getCurrentPosition().then(pos => { console.log(pos.coords.latitude, pos.coor ...

angular

The system encountered a syntax error: an unexpected token was found in the JSON at position 508

I encountered an issue with the following error message: ERROR SyntaxError: Unexpected token in JSON at position 508. I am seeking clarification on this matter and would appreciate any assistance in identifying where I may be making a mistake. Below is ...

angulartypescript

Update the blue glow effect on checkbox inputs within Bootstrap 4 to create a unique visual experience

This query has been asked repeatedly, and I have exhaustively attempted numerous solutions. Here is my code snippet: <div class="btn-group" id="btn-container" data-toggle="buttons"> <label class="btn classic-design"> <input type ...

htmlcssfocusbootstrap-4

Adjust the default dimensions of the background image

My CSS file includes the following code: input.myInput { background-image:url('search.png'); background-size:120px 120px; } In my HTML file, I have the following input element: <input type='text' class='myInput' > I ...

htmlcss

Presenting images in a row

Hello, I am facing an issue with displaying images retrieved from the database. They are not showing in-line. I have tried to put the images from a URL, and they display in-line, but the problem persists with images from the database. Any suggestions on ...

htmlcssimagetagsinline

Tips for integrating ng2-dragula into an Angular 2 project

How can ng2-dragula be implemented in Angular 2? Here's the code snippet, ****viewer.component.ts**** import { Component, Input, Output, EventEmitter } from '@angular/core'; import { Injectable } from '@angular/core'; import { ...

htmlangular

Tips for maintaining the fixed positioning of the left and right flex elements (sidebars) as the middle element scrolls, with the scroll bar located on the right side

I am currently designing a webpage with three main elements: a left sidebar, a right sidebar, and a central feed that is 600px wide and scrolls. The scroll bar must be positioned on the right side of the screen, allowing users to scroll by simply using the ...

htmlcssflexbox