Less.js Options Rootpath

Last Updated : 31 Jan, 2023

Less.js is a popular open-source CSS pre-processor that allows developers to write more efficient and maintainable stylesheets. It extends the capabilities of CSS by adding features such as variables, mixins, and nested rules, which make it easier to write and organize styles. The resulting stylesheet is then processed by Less.js and converted into regular CSS that can be understood by web browsers. In this article, we will see the Rootpath option in Less.js.

With the help of the Options Rootpath, we can add the path to every import and URL in the CSS. Less.js allows developers to set a “rootpath” that can be used when working on projects with a complex file structure, as it allows you to maintain the integrity of your URLs even when moving files around.

Rootpath is an option in Less.js that specifies the base path for resolving relative file URLs in the Less stylesheet. It can be used to set the base path for image URLs, font URLs, and imported Less files. When a relative URL is encountered in the Less stylesheet, Less.js will append the URL to the value of the root path option to form the full URL. For example, if the root path option is set to /Coding/Less/options/ and a relative URL ‘image.png’ is encountered in the stylesheet, the full URL will be ‘/Coding/Less/options/ image.png.

Syntax:

lessc -rp=resources/
OR
lessc --rootpath=resources/

We will explore an Options Rootpath and understand them through examples. Before we proceed to use Rootpath, we need to install the Less.js to the system, which is described below:

Step 1: Make a folder.

mkdir Rootpath

Step 2: Move to that folder and initialize npm.

npm init

Step 3: Install Less using npm

npm install less -g

Step 4: Make a file named main.less & index.html and make a folder named assets, and inside the assets folder, we have to make multiple folders like CSS, images, and place respective files init.

Project Structure: After successful installation, the below structure will be rendered:

Example 1: In this example, we will see how the root path is added to the URLs using the command line.

index.html

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0"> 
    <title>Less.js Options Rootpath</title> 
    <link rel="stylesheet" 
          href="main.css"> 
</head> 
  
<body> 
    <h1>GeeksForGeeks</h1> 
    <h3>Options Rootpath:</h3> 
    <div class="img1"></div> 
    <p> 
        The path of the URL will look like: <br> 
        url('./assets/images/image1.png') 
    </p> 
</body> 
  
</html>

main.less

Javascript

// importing styles.less 
@import "assets/css/styles.less";

styles.less

Javascript

@image-path: "../images/"; 
  
body { 
      background-repeat: no-repeat; 
} 
  
.img1 { 
      background: url('@{image-path}image1.png'); 
      height: 50px; 
      width: 250px; 
      border: 2px solid #308D46; 
}

To get the output, follow the command below.

lessc --rootpath=assets/css/ main.less main.css

In the above command, the path after the root path can be any path that we want to give to the file, i.e., the main.less is the original file and main.css is the file that gets created after the compilation. Now, in the final output, the path is added to the font URL and this does not affect the Less files, just one file will change which is the output CSS file.

main.css: The styles.less compiled to output styles.css

CSS

body { 
      background-repeat: no-repeat; 
} 
  
.img1 { 
      background: url('./assets/images/image1.png'); 
      height: 50px; 
      width: 250px; 
      border: 2px solid #308D46; 
}

Output:

Example 2: In this example, we will see how the root path changes the path of the import statement of the CSS file as well as the URL of the source using the command line. For this, we need to create an additional file which is the path.css file inside the global folder.

index.html

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <title>Less.js Options Rootpath</title> 
    <link rel="stylesheet" 
          href="main.css"> 
</head> 
  
<body> 
    <h1>GeeksForGeeks</h1> 
    <h3>Options Rootpath:</h3> 
    <p class="para"> 
        The path of the URL will look like: <br> 
        @import "assets/css/path.css";<br> 
        as well as <br> 
        url('./assets/fonts/font1.ttf') 
    </p> 
</body> 
  
</html>

styles.less

Javascript

@font-path: "../fonts/"; 
  
@font-face { 
      font-family: 'MyFont'; 
      src: url('@{font-path}font1.ttf'); 
} 
  
body { 
      background-color: #FCE77D; 
} 
  
h1 { 
      color: #308D46; 
} 
  
h3 { 
      font-family: MyFont; 
}

path.css

CSS

p { 
      height: 250px; 
      width: 250px; 
      background-color: #F96167; 
}

main.less

Javascript

// importing styles.css 
@import "assets/css/styles.less"; 
  
// importing path.css 
@import "./path.css";

To get the output, follow the command below.

lessc --rootpath=assets/css/ main.less main.css

Now, the final output is given below and we can see that the path is added to import as well as the URL but the original file has no change.

main.css: CSS output of the above Less file after compilation:

CSS

@import "assets/css/path.css"; 
  
@font-face { 
      font-family: 'MyFont'; 
      src: url('./assets/fonts/font1.ttf'); 
} 
  
body { 
      background-color: #FCE77D; 
} 
  
h1 { 
      color: #308D46; 
} 
  
h3 { 
      font-family: MyFont; 
}