Using the absolute path in the lesscss @import statement

Struggling to reference one less file from another using absolute syntax:

Less file A located at

$find `pwd` -name auth0.less
/Users/panos/dcimsupport/struxureon/auth0/src/main/resources/css/auth0.less

imports Less file B

@import '/bootstrap/less/so_colors.less';

Now, so_colors.less is located at

find `pwd` -name so_colors.less
/Users/panos/dcimsupport/struxureon/auth0/src/main/resources/bootstrap/less/so_colors.less

The import fails with

java.io.FileNotFoundException: File /Users/panos/dcimsupport/struxureon/auth0/src/main/resources/css/bootstrap/less/so_colors.less

It seems like lesscss is confined to the css folder. While importing as ../bootstrap/....less would work, navigating up directories isn't ideal. Any alternative solutions? Note that bootstrap cannot be under the css folder.

I've tried both

<groupId>biz.gabrys.maven.plugins</groupId>
<artifactId>lesscss-maven-plugin</artifactId>

and

<groupId>org.lesscss</groupId>
<artifactId>lesscss-maven-plugin</artifactId>

with configurations like

<configuration>
<sourceDirectory>${project.basedir}/src/main/resources</sourceDirectory>
<outputDirectory>${project.basedir}/target/classes/resources</outputDirectory>
<compress>true</compress>
<includes>
    <include>css/**/*.less</include>
    <include>layouts/**/*.less</include>
    <include>page/**/*.less</include>
    <include>pages/**/*.less</include>
</includes>

Answer №1

Understanding how plugins operate

The biz.gabrys.maven.plugins plugin interprets the path /bootstrap/less/so_colors.less as an absolute one. It does not consider the sourceDirectory as the root, leading it to search for /bootstrap/less/so_colors.less instead of

/Users/panos/dcimsupport/struxureon/auth0/src/main/resources/bootstrap/less/so_colors.less
. Since this file does not exist, the plugin resorts to treating it as relative to
/Users/panos/dcimsupport/struxureon/auth0/src/main/resources/css/auth0.less
, resulting in a search for
/Users/panos/dcimsupport/struxureon/auth0/src/main/resources/css/bootstrap/less/so_colors.less
.

The behavior of the org.lesscss plugin is quite similar.


Suggestion for enhancement

I am considering incorporating this improvement into my plugin; however, I must first complete some migration tasks. Regrettably, this means that the release of the enhancement may not be imminent (e.g. by the end of 2016).

The org.lesscss plugin lacks support from its author or others.


Resolution

For now, utilizing relative paths with ../ remains the only viable option.

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

No specified margin at the top of the website's header section

My task was to design the header section of a webpage to resemble this desired webpage look. I started by creating a "header" tag as a container and added a navbar within it. To display the items, I used an unordered list with CSS adjustments for a horizon ...

How can I align a sub-submenu horizontally using CSS?

I've built a nested menu using the ul/li tags, and I'm looking to align the second and third sub-menus horizontally with the first submenu. Here is my current visual layout: https://i.sstatic.net/4TctL.png, and this is what I want it to look lik ...

Tips for centering text in a div element

Check out this fiddle http://jsfiddle.net/QLCeH/ where the text isn't aligning properly with the header "Google" and is ending up below the image. Here's the code from the fiddle: HTML : <div style="margin-left:auto;margin-right:auto; widt ...

Pre-loading custom fonts in Next.js for a smoother user experience

I am currently utilizing next.js. My objective is to ensure that the fonts are loaded before any content is displayed on the screen. I attempted to achieve this by including them in the Head component within the _.document file using the rel="prelo ...

Aligning the right menu of Ant Design from the Layout component

How can I align the menu to the right in antd? https://i.sstatic.net/xmh6E.png Please Note: The image has been edited using Photoshop and is not real. I attempted to declare a className = "Menu" and set .Menu {align-items: right;} but it didn't wor ...

Place the data input above onto the SVG curve

I am looking to position the input form element above the center of the svg curve as illustrated The parameters for the curve are defined as follows: <svg width="600" height="80" style="border-style: dashed;" xmlns="http://www.w3.org/2000/svg" id="" s ...

Utilizing the .fadeOut('slow') method for CSS visibility manipulation

Here is a little JavaScript code snippet that I have: function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style. ...

Receiving inaccurate video duration when the input bar is modified

Initially, I am uncertain whether the issue stems from Javascript or CSS. The code in question involves displaying the corresponding video time when a user hovers over an input bar. The calculation utilized is as follows: ((user mouseX position / input wi ...

Navbar dropdown expanding the page width

Issue with Bootstrap 4 beta 2. My right-aligned navbar extends right-wards when I click on the dropdown. What could be causing this problem? <nav class="navbar navbar-expand-lg navbar-light bg-white" id="alertNavBar"> <div class="collapse nav ...

What steps can I take to ensure that the elements are in the same row instead of being displayed in three separate rows?

(I'm a beginner in web development and need some help) Is there a way to align elements into the same row instead of stacking them up in separate rows? I'm working on creating a header bar similar to the one on the Naive UI Documentation Website. ...

Eliminating unnecessary whitespace between the bottom of the document and an element

I have a HTML page that when scrolled should limit scroll to the document height. It must not exceed the bottom of an element. Here is a screenshot for better understanding: https://i.stack.imgur.com/RaVg8.jpg The scrolling should be limited after the En ...

Arrange your grid system with Bootstrap Vue

There is a dataset retrieved from an API, and each item will be displayed within a div using a v-for loop. The desired layout for the grid of divs is as follows: [-- item 1 --][-- item-2 --] [-- item 3 --][-- item-4 --] [-- item 5 --][-- item-6 --] [-- ite ...

Is there a way to perfectly align the content at the center of the section?

I'm trying to ensure that the content in each section is centered. What is the correct way to achieve this? Should I focus on the containers/rows for alignment? I have tried placing the alignment properties in different elements (section, container, r ...

Differences in Spacing: Exploring Bootstrap v5.1.1 Compared to 4.0

After comparing two pages, one using Bootstrap v5.1.1 and the other with 4.0.0, I have observed differences in spacing. Bootstrap v5.1.1: .topspacer { padding-top: 70px; } .righticon { float: right; } .clear { clear: both; } a { text- ...

Adjusting the Transparency of the Background in a Pop-Up

I am experiencing an issue with my popup where I want the background to be transparent. However, when I set the opacity in CSS to 0.5 or less, the text also becomes transparent and very dark. How can I achieve a background with 50% opacity while keeping th ...

Tips for creating a square HTML element

Looking to customize my react calendar with square tiles. Currently, the width is determined by the overall calendar width, but I want the height to match. https://i.sstatic.net/3vVrq.png Sample HTML: <button class="react-calendar__tile react-cal ...

Adjust the background color of the unordered list when it corresponds to the current

Looking to customize a course calendar so that the day column stands out on its designated day of the week. For example, on Wednesday, the Wednesday column should have a distinct appearance. I've been experimenting with different methods and searchi ...

creating a horizontal drop-down navigation bar

I recently created a horizontal dropdown menu for my website and I have a couple of questions regarding the styling: 1. How can I incorporate a small blue triangle above the header border that would only appear on hover? Here is an example of what I&ap ...

Styling text in JavaScript and CSS with colored fonts and underlines

I am looking to customize the CSS for the font style. <div id="a" onmouseover="chbg('red','b')" onmouseout="chbg('white','b')">This will change b element</div> <div id="b">This is element b</div ...

Ways to centrally align the bootstrap modal vertically

As a newcomer, I have exhausted all available solutions before turning to this platform for help. Here is my current CSS code: #orphanModal{ .modal-body{ min-height: 450px; margin-bottom: 10px; } .modal-footer { margin: 0; padding: ...