Encountering an issue with angular ag-grid: "Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Invalid CSS after "adecimal"

I've encountered an error while using node-sass, sass, or both. Even after removing node modules and clearing the cache, the error persists. I've attempted different versions of node-sass and sass, but the issue continues to arise. This problem arose after upgrading my ag-grid version from 23.4 to 27.3.

ERROR in ./src/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/dist/cjs.js??ref--13-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "    @return math": expected expression (e.g. 1px, bold), was ".div($lhs, $rhs);"
        on line 315 of node_modules/ag-grid-community/src/styles/mixins/_ag-theme-params.scss
        from line 1 of node_modules/ag-grid-community/src/styles/ag-theme-base/sass/_ag-theme-base-default-params.scss
        from line 1 of node_modules/ag-grid-community/src/styles/ag-theme-base/sass/_ag-theme-base-mixin.scss
        from line 1 of node_modules/ag-grid-community/src/styles/ag-theme-base/sass/_ag-theme-base.scss
        from line 1 of node_modules/ag-grid-community/src/styles/ag-theme-alpine/sass/_ag-theme-alpine-mixin.scss
        from line 2 of D:\Projects\Operative\Repo\ag-grid-update\finance\finance-frontend\src\styles.scss
>>     @return math.div($lhs, $rhs);

   ----------------^

In need of assistance as I have exhausted all solutions found on Stack Overflow.

Answer №1

Starting with Version 26 of AG Grid, support for Node-Sass has been discontinued.

This change was made in favor of Dart-Sass, which you can learn more about here.

Whether you are upgrading from an older version of AG Grid or new to the platform, we strongly recommend utilizing Sass.

To gain a better understanding of how AG Grid and Sass interact, including themes and styles, check out our detailed documentation.

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

Rotate text vertically (90 degrees) on IE and Firefox browsers

On one of my pages, I have an asp GridView and I want to display the text vertically to improve its printing quality. I am currently using CSS to achieve this effect: .rotate { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); width: 25px; ...

What is the best method to extract a query parameter from the ActivatedRoute snapshot within the Angular app component?

Is there a way to retrieve a query parameter in my app.component synchronously without using ActivatedRoute's queryParamMap observable? I tried using the route snapshot like this: const param = this.route.snapshot.queryParamMap.get('param') ...

Change Observable<String[]> into Observable<DataType[]>

I'm currently working with an API that provides me with an Array<string> of IDs when given an original ID (one to many relationship). My goal is to make individual HTTP requests for each of these IDs in order to retrieve the associated data from ...

Updating a value in an array in Angular using the same ID

I have an array of buildings that looks like this: const buildings = [ { id: 111, status: false, image: 'Test1' }, { id: 334, status: true, image: 'Test4' }, { id: 243, status: false, image: 'Test7' }, { id: 654, stat ...

When I click the mouse, my drawing function starts lines from the top left corner instead of the latest point

http://codepen.io/FreelanceDev/pen/kLpJSf?editors=1010 You can find my CodePen project through the provided link. While the HTML and CSS elements are working correctly, I am facing issues with the JavaScript functionality. The desired outcome should be d ...

Data exchange between components via an API

I'm in the process of developing a website dedicated to showcasing the top 20 highest-rated Sci-fi movies. The main component on the homepage utilizes a GET request through a service to retrieve an array of objects containing the movie data. This movi ...

Should the event happen inside a div section

How can I determine if an element is currently positioned within a specific div? I am working on a vertical scrolling menu where the height of the navigation div is set and overflow is hidden to show only a portion of the links at a time. To navigate thr ...

Guide to transforming the image's color with CSS3

Is there a way to transform the color of an image from grayscale to green, red, or yellow using CSS3? I attempted the code below but unfortunately, it did not produce the desired result. img { -webkit-filter: hue-rotate(90deg); filter: hue-rotat ...

When using HTML/Bootstrap5, the ms-auto class does not correctly align items to the right in the navbar

I'm currently working on mastering bootstrap through an online tutorial, but I've hit a roadblock when it comes to right-aligning items in a navbar. I've double-checked my code against the instructor's, and it's a perfect match: &l ...

Replace the placeholder text with an icon

I am having trouble changing the placeholder text using a function. I am unable to add any additional code to style the text, such as making it bold or adding an icon next to it. When I try to do so, the code is displayed as text instead of being executed. ...

Changing the Color of Navbar Links in Bootstrap 4

Good evening everyone, Recently, I've been experimenting with Bootstrap 4 to create a simple Navbar. I encountered an issue where I attempted to adjust the font-size and color (or hover color) in the Navbar. Strangely, the font-size adjustments seem ...

Which Angular component, directive, or pipe would be best suited for creating dynamic HTML content similar to this?

(I am transitioning from React to Angular, so please bear with me if my question has a hint of React influence.) I am in need of developing an Angular component that can accept a string along with a list of terms within that string for displaying tooltips ...

Encircling a particular group of cells with a border

I have completed the component with a table layout. My current challenge is figuring out how to surround a range of selected cells with a border, similar to the first cell in the group shown below: https://i.stack.imgur.com/5Euht.png I attempted using d ...

Can you help me identify any issues with this code for uploading an image and quickly displaying it in Angular?

Located within the profile.component.html file <label for="profile">Profile Photo</label> <input type="file" [(ngModel)]='uploadedPhoto'/> <img [src]='uploadedPhoto'> Contained in the profile.component.ts file ...

Unable to dismiss keyboard in iPhone search bar

I recently added a search bar to my website and I've encountered a strange issue: when pressing the search button on an iPhone, the keyboard does not dismiss even though the search function works perfectly fine. Essentially, after typing in the search ...

Adjust the color of the glyphicon icon within a date and time picker dropdown component

I decided to implement the bootstrap datetimepicker using this gem and utilized the following HTML code: <div id="custom-dates" style=" clear:both;"> <div class="container"> <div class="row"> <div class='col-md-3 col-xs-3' ...

Tips for creating multiple popups using a single line of JavaScript code

I am new to JavaScript and I am attempting to create a popup. However, I am facing an issue in opening two divs with a single line of JavaScript code. Only one div opens while the other remains closed despite trying various solutions found on this website. ...

Tips for resolving the issue of loading not appearing on screen in Angular

How can I resolve the problem of the loading animation not appearing? Below is the code snippet: HTML <div *ngIf="tempThermometer | async as temp; else loading"> <ng-container *ngIf="temp.length !== 0; else noItems"> &l ...

Using JavaScript to calculate dimensions based on the viewport's width and height

I have been trying to establish a responsive point in my mobile Webview by implementing the following JavaScript code: var w = window.innerWidth-40; var h = window.innerHeight-100; So far, this solution has been working effectively. However, I noticed th ...

The vanishing act of CSS divs as you scroll there

I am currently working on a website that relies solely on CSS and hover states to create a drop-down menu. The issue I am encountering is that the navigation items are numerous, causing users on smaller laptops to have to scroll to see all of them. However ...