The implementation of gulp-less encounters issues when the !important rule is applied

When the !important declaration is used on a specific less variable, it causes the build to fail. The use of !important is common in our codebase, so it's puzzling why this particular instance is causing an issue.

Setup:

customer1.less

@import "basefile";

@wrapper-height: auto !important;
...

basefile.less

@import 'variables/basefile-variables';
...

basefile-variables.less

@wrapper-height: auto;
...

Error encountered during gulp-less compilation:

Error in plugin "gulp-less"
Message:
    Cannot create property '_index' on string '!important' in file /<redacted>/customer1.less line no. 1
Details:
    type: Syntax
    filename: /<redacted>/customer1.less
    index: NaN
    line: 1
    column: -1
    callLine: NaN
    callExtract: undefined
    extract: ,@import "basefile";,
    lineNumber: 1
    fileName: /<redacted>/customer1.less
javascriptcssgulpless

Answer №1

Maybe your variable @wrapper-height is using hyphens.

Switch to a variable name like @wrapperHeight and test how Gulp reacts.

UPDATE: Looks like you're attempting to import basefile instead of basefile.less - make sure to include the .less file extension.

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

Transitioning in Vue.js can be triggered by changing a value up or down

My current transition block component is set up like this: <div v-if="!surveyResultIsReady" class="vh-md-40 position-relative" > <transition name="custom-classes-transition" enter-active-class="animated slideInRight" ...

javascriptcssvue.jsvuejs2vue-transitions

Creating a custom HTTP interceptor that can intercept a response and handle errors within the 'response' property

My setup includes a basic Angular http interceptor designed to manage errors. I need to verify if the received data is categorized as a string, treating it as an error rather than a success. 'response': function(response) { if(typeof respons ...

javascriptangularjs

Error message: Unable to locate module when using a variable to import an image in React

I've encountered an issue with my React code that I can't seem to figure out. I am integrating the Accuweather API and trying to display the weather icon on my app. Initially, everything seemed to be working fine as I constructed the image path l ...

javascriptreactjscreate-react-app

Determine what nodeType is checked by jQuery's isArrayLike function

Within jquery, there is a function called 'isArrayLike' that is utilized by various other functions such as $.each. function isArraylike( obj ) { var length = obj.length, type = jQuery.type( obj ); if ( type === "function" || jQuery.isWindo ...

javascriptjquery

What is the best way to transfer information from an API to a state hook?

Encountering a recurring issue that requires some guidance. I am working on an API call and need to display the results in another component within the form's child elements. I've managed to create a component that can map state to JSX, but I&apo ...

javascriptajaxreactjsfetch-apireact-hooks

Display two separate views or templates on the screen using AngularJS

Currently, I am developing a mobile app powered by Angular and I am looking to create a unique view that displays halves of two separate views. The user should be able to switch between the two views by swiping up or down. Can anyone provide advice on how ...

javascriptangularjsmobileangularjs-directivetouch

Trigger and maintain click action in Javascript

I am currently in the planning stages of a project, and I'm facing an issue with a click and hold event. My goal is to have a div that allows me to click through it (meaning I can still interact with elements underneath), while having an opacity of ar ...

javascriptjquerycssonclickonclicklistener

Having trouble with @here/maps-api-for-javascript in Next.js - it's not functioning

Can anyone help me understand why @here/maps-api-for-javascript is not functioning properly in my Next.js application and producing the following error message: import H from "@here/maps-api-for-javascript"; export default H; ^^^^^^ SyntaxErr ...

javascriptnext.jshere-api

Reveal the inner workings of functions within the Vuex Plugin

I am currently working on setting up a Vuex plugin where I want to make the undo function accessible for use in my component's click events. // plugin.js const timeTravel = store => { // .. other things function undo () { store.commit(&a ...

javascriptpluginsvue.jsvuex

Using Jquery to detect changes in a Datalist element in an HTML5 document

This snippet illustrates the code: <input name="cmbname" type="text" id="cmbname" list="listcmbname" autocomplete="off" runat="server"> <datalist id="listcmbname"> <option data-id="1" value="a"></option> <optio ...

javascriptjqueryasp.nethtml

Transform your scene into a stunning 3D texture using THREE.js's 3D Render Targets feature

After exploring the THREE.js example available here, I am curious about how to avoid scenes rendered as textures from appearing 'flattened'. Essentially, I want to maintain the depth illusion within the scene when using a WebGLRenderTarget. I ha ...

javascriptthree.jswebgl

What are the steps to resolving an issue in a Jest unit test?

In my ReactJs/Typescript project, I encountered an issue while running a unit test that involves a reference to a module called nock.js and using jest. Initially, the import statement was causing an error in the .cleanAll statement: import nock from &apos ...

javascriptreactjsunit-testingtypescriptjestjs

Directives may not function as expected in the invoked view, however, they work properly on the index.html page

Hello there, I've recently started using AngularJS for building applications and encountered a strange issue. I tried looking for similar problems but couldn't find a solution, which is why I'm reaching out to you all! My project specific ...

javascriptangularjsnode.jsboweryeoman

Is it possible to integrate the Firestore npm library into my Express application?

Recently, I created my own library to act as a nosql database on my node.js web server in place of mongodb. I came across this interesting quote: Applications that use Google's Server SDKs should not be used in end-user environments, such as on pho ...

javascriptnode.jstypescriptexpressgoogle-cloud-firestore

Unable to organize list of entities based on numerical values

I am working with an array of objects structured like this: [ { "value": 351.68474, "o_p": [ "$.text" ] }, { "value": 348.0095, "o_p": [ ...

javascripttypescript

Slide your cursor over to reveal a picture

I'm looking to create an interactive image gallery where the user can hover over an image to reveal text below it. I've been trying to achieve this by setting up my images in a specific way: echo "<div class=textimage style=background-image:u ...

phpcss

Using Flexbox for dynamic-height items with column wrapping

Struggling to create a dynamic layout that adapts differently for mobile and desktop devices? The goal is to have items sorted based on screen size, with the layout changing accordingly. Check out the main objective below, with a mobile layout on the left ...

csstwitter-bootstrapbootstrap-4flexbox

Update perspective following ajax request in AngularJS

I am struggling with angularJS and need assistance with calling ajax. Currently, my ajax call looks like this: $scope.$watch('value1', function() { if ($scope.value1 != null) { $http({ method : 'GET', url : 'http ...

javascriptjqueryajaxangularjs

Creating a dynamic layout of 9 divs in a fluid 3x3 grid

Fiddle | FullScreen UPDATE : New Fiddle | FullScreen View The code snippet provided demonstrates the creation of a grid with dimensions of 3x3, consisting of 9 div elements (with 8 cloned using jQuery). The horizontal alignment of the grid has been ac ...

jqueryhtmlcss

What is the best way to center align my button using CSS?

I'm struggling with aligning this button in CSS to the center: .btn { background-color: #44c767; -moz-border-radius: 28px; -webkit-border-radius: 28px; border-radius: 28px; border: 1px solid #18ab29; display: inline-block; cursor: poi ...

css