Issue arises when attempting to compile .less file with variables sourced from a separate file

I encountered an issue with my .less file where it contains definitions that rely on variables from another file.

For example:

body {
    font-family: @baseFontFamily;
    font-size: @baseFontSize;
    color: @textColor;
}

At first, IntelliJ displayed the variables as undefined. Upon compiling with Lessc, I came across the following error message:

TypeError: Cannot call method 'charAt' of undefined at getLocation (C:\PATH\npm\node_modules\less\lib\less\parser.js:212:34) at new LessError (C:\PATH\npm\node_modules\less\lib\less\parser.js:221:19) at Object.toCSS (C:\PATH\npm\node_modules\less\lib\less\parser.js:385:31) at C:\PATH\npm\node_modules\less\bin\lessc:107:28 at C:\PATH\npm\node_modules\less\lib\less\parser.js:434:40 at C:\PATH\npm\node_modules\less\lib\less\parser.js:94:48 at C:\PATH\npm\node_modules\less\lib\less\index.js:116:17 at C:\PATH\npm\node_modules\less\lib\less\parser.js:434:40 at C:\PATH\npm\node_modules\less\lib\less\parser.js:94:48 at C:\PATH\npm\node_modules\less\lib\less\index.js:116:17

Upon researching, I concluded that there was an error within my code. My initial assumption was that the issue stemmed from the variable definition not functioning correctly. When commenting out the lines containing variables, lessc compiled the project without any problems.

However, even after adding the necessary @import statement to define the variables (and uncommenting the variable lines), I still encountered the compile-time error. Is there something crucial that I am overlooking?

Answer №1

Discovered an issue where both the parent and child folders had a 'config.less' file. By transferring the contents of the config.less from the child to the parent version, I successfully resolved the issues I was facing.

Answer №2

After some investigation, I came across the solution. Instead of compiling all the .less files in the suite, I decided to compile just one file at a time. This approach revealed that NPM was struggling to find one of the Mixins being used. By properly @import-ing the necessary file, the entire suite now compiles without any issues.

The valuable lesson from this experience is: - When facing issues with a specific .less file, try compiling it independently. This way, NPM will provide more detailed information about the error instead of just a generic stack trace.

Answer №3

Encountering similar errors is something I've experienced while operating in this manner, but surprisingly the compiled css functions perfectly fine. My practice involves compiling less during development and solely incorporating the css at runtime to avoid any dependencies on javascript impacting styles...

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

Personalize the pagination or other elements of Splide in a Svelte component to suit your needs

I am currently integrating Splide into my Svelte application and facing an issue with the pagination styling. The pagination is appearing on top of my images and is too transparent for my liking. I'm utilizing Svelte Splide to incorporate this library ...

Adjust the styling with jQuery according to the selected value from the dropdown menu

Check out this Fiddle I have a jQuery script that is supposed to change the style of an input box to display:block if the selected value is "<>" (Between). However, currently it is changing the css for all selected items instead of just the target i ...

In Chrome, the "div" with the style attribute "resize:both" is unable to shrink, while it functions properly in Firefox

Here's the div code I'm working with: <div style='overflow:hidden;resize:both;border:1px solid orange;'> <div style='background-color:#aaa;width:400px;height:300px;'> </div> </div> You can view i ...

Encountering problems during installation of packages in Angular

Running into issues with commands like "ng add @angular/localize" or "ng add @ng-bootstrap/ng-bootstrap". As a newcomer, I'm struggling to interpret the error messages. I have included screenshots for reference. View angular version screenshot View e ...

What is the solution to prevent the inadvertent activation of onmouseEnter when onmouseLeave

I recently created a CSS/Jquery script that enlarges a DIV and replaces a font awesome icon with some text when hovered over, then changes it back to the icon when the mouse leaves. However, I noticed in the console that when I remove the mouse from the DI ...

Is there a way to arrange the cards in a row so they fill up the grid before moving on to the next row?

After retrieving data from a table in my database, I am displaying it on the screen as cards. However, the issue is that all the cards are displaying on the left side of the screen in a single column, rather than appearing in rows of 3 as desired. Below i ...

Batch script prematurely ends when compiling .less files in a batch for-loop

Recently, I decided to try my hand at using batch scripts as a way to compile the .less files for my website into .css files before deploying. It seemed like an efficient solution for my needs. However, after successfully utilizing a for loop in my batch ...

Is there a way to assign each MySQL result to a separate variable while maintaining just one connection to the database?

I'm in the midst of a personal project and I could really use your expertise. Despite hours of research, I haven't been able to find a solid solution to my problem (likely because my PHP skills are still a work in progress). Here's the deal ...

The box shadow feature does not function properly when the position is set to sticky

Applying position sticky to th and td in the example below seems to be causing issues with the box shadow not working. Can anyone provide insights on why this is happening? <div class="overflow-x-auto lg:overflow-visible"> <div> <t ...

I seem to be having trouble getting my style to work properly with Material UI's makeStyles

I am experiencing an issue with Material-UI makeStyles not working properly. I am trying to apply my CSS style but it doesn't seem to be taking effect. I suspect that Bootstrap or MaterialTable might be causing this problem. While Bootstrap4 works fin ...

Animating CSS styles in Vue.js based on JavaScript triggers

Within my Vue.js application, I've implemented a login form that I'd like to shake whenever a login attempt fails. Though I have achieved the desired shaking effect, I'm not completely satisfied with my current solution. Here's a simpl ...

How can we nest a div within the outermost parent element?

Consider a scenario where there are 3 different divs named grandParent, Parent, and Child. Although the parent's tag is placed inside the grandParent, due to the use of position: absolute; property, the parent ends up being displayed outside the grand ...

The CSS files undergo modifications when executing the command "npm run dev"

I've been working on an open-source project where I encountered a bug. Even when there are no images to display, the "Load More" button in the web browser extension still appears. To fix this, I decided to add the class `removeButton` to the button an ...

Issue with compiling Mattermost on Ubuntu 16.06 encountered

I've encountered a compilation issue while trying to build Mattermost on Ubuntu. Despite having Node 7.x installed (and even testing with 6.x), I'm consistently facing errors like the ones below: [701] ./images/favicon/apple-touch-icon-120x120. ...

Having trouble installing dependencies for node 8 on Ubuntu 16.4

Having trouble installing my project, which runs smoothly on node 6, due to a dependency issue with node 8. The problematic dependency is not only deprecated but also trying to write in restricted areas without proper permissions. ubuntu@ip-xxxxxxx:~/shar ...

jQuery SlideUp and SlideDown causing Margin Bug in Internet Explorer 7

When clicking the "more info" or "less info" buttons to slide content up or down, a spacing glitch is created in IE7. Using show/hide instead of slideUp/slideDown seems to solve the issue. Is there a way to make sliding work in IE7 without causing this pro ...

Utilizing CSS percentage height when the parent element is constrained by a defined minimum and

It is a common rule that when applying a percentage height to an element, the percentage is calculated based on its parent's height. Consider a scenario where you want a child element to be 40% of its parent's height. The parent element has both ...

Encountering an EACCES error in Ubuntu when attempting to use bower for installation due to permission denial

When attempting to install bower, I used the command... sudo npm install -g bower I received the following output... npm http GET https://registry.npmjs.org/bower npm http 304 https://registry.npmjs.org/bower /usr/local/bin/bower -> /usr/local/lib/no ...

How to use Python and JavaScript to make a WebElement visible in Selenium

I am currently facing an issue with uploading a PNG file using Selenium. The input element necessary for the upload process is visible to the user but not to Selenium. Following the suggestions in the Selenium FAQ, I tried using JavaScriptExecutor as shown ...

TS-2304 Error - 'Iterable' not found in TypeScript when trying to import 'jquery' into a '.ts' file

Currently, I am utilizing TypeScript version 2.4 in Visual Studio Code for development. My approach involved installing jQuery via NPM using the given command: npm install --save @types/jquery Subsequently, I obtained the source code for the jquery modul ...