Open In App

Less.js Options Rewrite URLs

Improve
Improve
Like Article
Like
Save
Share
Report

Less.js is a CSS pre-processor that allows developers to use variables, mixins, and other programming concepts in their CSS code. One of the useful features of Less.js is the ability to rewrite URLs in CSS, which can make it easier to manage and maintain large projects. This can be useful when migrating a project to a new domain. In this article, we will see the Options for Rewrite URLs using different ways of options through the illustrations in Less.js. 

Less.js Options Rewrite URLs: Rewrite options allow us to rewrite URLs in the imported files so that the URL must be relative with respect to the base file which is passed to Less. There are 3 different options for Rewrite URLs, which is described below:

  • rewriteUrls: ‘off’: By default, Rewrite URLs options are kept as off, this option tells Less.js to not modify URLs in the CSS code, and to leave them as they are. To turn off URL rewriting in Less.js, we can use the less –rewrite-urls=off command-line option. 
  • rewriteUrls: ‘all’: The rewriteUrls: ‘all’ option in Less.js is a powerful feature that allows developers to easily control how URLs are handled in their CSS code. This option allows us to rewrite URLs in imported files so that the URL is always relative to the base file that has been passed to Less. It can be used to rewrite all URLs in the CSS, regardless of their type or location, making it more maintainable and portable.
  • rewriteUrls: ‘local’: With rewriteURLs: ‘local’ it will only rewrite URLs that are explicitly relative (those starting with a ‘.’).

We will explore all the approaches for Rewrite URLs and understand them through examples. Before we proceed, we need to setup the Less.js to the system, which is described below:

Step 1: Create a folder

mkdir Less

Step 2: Move to the created folder and initialize npm init

npm init

Step 3: Install Less using npm: Here ‘-g’ is used to install ‘Less’ globally.

npm install less -g

Step 4: Inside the Less folder, create the main.less file, along with creating another folder name ‘globalFolder’, and inside that folder create a file named NewFonts.less.

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

 

Example 1: In this example, we will be using the rewriteUrls: ‘off’ option. It is the option that is set by default so if we import a file that has a font URL then the same URL will be output in the CSS.

Syntax:

less --rewrite-urls=off
  • index.html

HTML




<!DOCTYPE html>
<html lang="en">
   
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>Less.js Options Rewrite URLs</title>
    <link rel="stylesheet"
          type="text/css"
          href="main.css">
</head>
<body>
    <h1>GeeksForGeeks</h1>
    <h3>Less.js Options Rewrite URLs</h3>
    <p>
          In this mode url will look like this
      </p>
    <p class="url">
      src: url('NewFont/SansationLight.woff') format('woff');
      </p>
</body>
   
</html>


Consider the below JavaScript file as the main.less file.

@import "globalFolder/NewFonts.less";

And consider this JavaScript file as NewFonts.less.

  • main.less

Javascript




@defaultcolor: #308d46;
@height: 100px;
@width: 500px;
@margin: 10px;
@bg-color: #fce77d;
@bg-color2: #f96167;
@font-face {
    font - family: "NewFont";
    src: url("NewFont/SansationLight.woff") format("woff");
}
body {
    background - color: @bg-color;
}
h1 {
    color: @defaultcolor;
    height: 50px;
    width: @width;
    margin: @margin;
}
h3 {
    width: @width;
}
.url {
    height: @height;
    width: @width;
    background - color: @bg-color2;
}
.font {
    font - family: NewFont;
}


To get the output using the rewriteUrls: ‘off’, type the  command:

less --rewrite-urls=off main.less main.css

Here, the main.less is the current files that are already present and main.css is the file that is created after compiling main.less, & in this newly created file, the URL is exactly the same as before because the rewrite URLs option is ‘off’.

  • main.css

CSS




@font-face {
    font-family: "NewFont";
    src: url("NewFont/SansationLight.woff") format("woff");
}
 
body {
    background-color: #fce77d;
}
 
h1 {
    color: #308d46;
    height: 50px;
    width: 500px;
    margin: 10px;
}
 
h3 {
    width: 500px;
}
 
.url {
    height: 100px;
    width: 500px;
    background-color: #f96167;
}
 
.font {
    font-family: NewFont;
}


Output:

 

Example 2: In this example, we will be using the rewriteUrls: ‘all’ options. In this option, if we import a file that has a font URL then the URL will change in the output CSS.

Syntax:

less --rewrite-urls=all
  • index.html

HTML




<!DOCTYPE html>
<html lang="en">
   
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width,
         initial-scale=1.0">
    <title>   
          Less.js Options Rewrite URLs
      </title>
    <link rel="stylesheet"
          type="text/css"
          href="main.css">
</head>
   
<body>
    <h1>GeeksForGeeks</h1>
    <h3 class="font">
          Less.js Options Rewrite URLs
      </h3>
    <p>
          In this mode url will look like this
      </p>
    <p class="url">
      src: url('globalFolder/NewFont/SansationLight.woff')
      format('woff');
      </p>
</body>
   
</html>


  • main.less

Javascript




@defaultcolor: #308D46;
@height: 100px;
@width: 500px;
@margin: 10px;
@bg-color: #FCE77D;
@bg-color2: #F96167;
@font-face {
    font - family: 'NewFont';
    src: url('NewFont/SansationLight.woff') format('woff');
}
body {
    background - color: @bg-color;
}
h1 {
    color: @defaultcolor;
    height: 50px;
    width: @width;
    margin: @margin;
}
h3 {
    width: @width;
}
.url {
    height: @height;
    width: @width;
    background - color: @bg-color2;
}
.font {
    font - family: NewFont;
}


To get the output using the rewriteUrls: ‘all’, type the below command:

less --rewrite-urls=all main.less main.css

Here, the main.less is the current files that are already present and main.css is the file that is created after compiling main.less & in this file, the URL is changed to make it relative to the base file because the rewrite URLs option is ‘all’.

  • main.css

CSS




@font-face {
    font-family: 'NewFont';
    src: url('globalFolder/NewFont/SansationLight.woff') format('woff');
}
 
body {
    background-color: #FCE77D;
}
 
h1 {
    color: #308D46;
    height: 50px;
    width: 500px;
    margin: 10px;
}
 
h3 {
    width: 500px;
}
 
.url {
    height: 100px;
    width: 500px;
    background-color: #F96167;
}
 
.font {
    font-family: NewFont;
}


Output:

 

Example 3: In this example, we will be using the rewriteUrls: ‘local’ options. In this option, it will only rewrite the URLs that are explicitly relative to those URLs that is starting with (‘.’). For instance,

url('./NewFont/NewFont.woff2') will become url('./globalFolder/NewFont/NewFont.woff2')
 
and url('NewFont/NewFont.woff2') stays same as url('NewFont/NewFont.woff2')

Syntax:

less --rewrite-urls=local 
  • Case 1: In this case, the URL is starting with (‘.’).

index.html:

HTML




<!DOCTYPE html>
<html lang="en">
   
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>Less.js Options Rewrite URLs</title>
    <link rel="stylesheet"
          type="text/css"
          href="main.css">
</head>
<body>
    <h1>GeeksForGeeks</h1>
    <h3 class="font">
          Less.js Options Rewrite URLs
      </h3>
    <p>In this mode url will look like this</p>
    <p class="url">
          src: url('./globalFolder/NewFont/SansationLight.woff')
          format('woff');
      </p>
</body>
   
</html>


main.less:

Javascript




@defaultcolor: #308D46;
@height: 100px;
@width: 500px;
@margin: 10px;
@bg-color: #FCE77D;
@bg-color2: #F96167;
@font-face {
    font - family: 'NewFont';
    src: url('./NewFont/SansationLight.woff') format('woff');
}
body {
    background - color: @bg-color;
}
h1 {
    color: @defaultcolor;
    height: 50px;
    width: @width;
    margin: @margin;
}
h3 {
    width: @width;
}
.url {
    height: @height;
    width: @width;
    background - color: @bg-color2;
}
.font {
    font - family: NewFont;
}


To get the output using the rewriteUrls: ‘local’ follow the command below:

less --rewrite-urls=local main.less main.css

After compiling main.less, a new file is get created, i.e., the main.css and in that file, the URL is changed to make it relative to the base file because the rewrite URLs option is ‘local’.

main.css:

CSS




@font-face {
    font-family: 'NewFont';
    src: url('./globalFolder/NewFont/SansationLight.woff') format('woff');
}
 
body {
    background-color: #FCE77D;
}
 
h1 {
    color: #308D46;
    height: 50px;
    width: 500px;
    margin: 10px;
}
 
h3 {
    width: 500px;
}
 
.url {
    height: 100px;
    width: 500px;
    background-color: #F96167;
}
 
.font {
    font-family: NewFont;
}


Output:

 

  • Case 2: In this case, the URL is not starting with (‘.’) so the URL will not change.

index.html:

HTML




<!DOCTYPE html>
<html lang="en">
   
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>Less.js Options Rewrite URLs</title>
    <link rel="stylesheet"
          type="text/css"
          href="main.css">
</head>
<body>
    <h1>GeeksForGeeks</h1>
    <h3 class="font">
          Less.js Options Rewrite URLs
      </h3>
    <p>In this mode url will look like this</p>
    <p class="url">
          src: url('NewFont/SansationLight.woff') format('woff');
      </p>
</body>
   
</html>


main.less:

Javascript




@defaultcolor: #308D46;
@height: 100px;
@width: 500px;
@margin: 10px;
@bg-color: #FCE77D;
@bg-color2: #F96167;
@font-face {
    font - family: 'NewFont';
    src: url('NewFont/SansationLight.woff') format('woff');
}
body {
    background - color: @bg-color;
}
h1 {
    color: @defaultcolor;
    height: 50px;
    width: @width;
    margin: @margin;
}
h3 {
    width: @width;
}
.url {
    height: @height;
    width: @width;
    background - color: @bg-color2;
}
.font {
    font - family: NewFont;
}


To get the output using the rewriteUrls: ‘local’ follow the command below:

less --rewrite-urls=local main.less main.css

After compiling main.less, a new file is get created, i.e., the main.css file and in that file, the URL is exactly the same as before because the URLs are not starting with (‘.’).

 main.css:

CSS




@font-face {
    font-family: 'NewFont';
    src: url('NewFont/SansationLight.woff') format('woff');
}
 
body {
    background-color: #FCE77D;
}
 
h1 {
    color: #308D46;
    height: 50px;
    width: 500px;
    margin: 10px;
}
 
h3 {
    width: 500px;
}
 
.url {
    height: 100px;
    width: 500px;
    background-color: #F96167;
}
 
.font {
    font-family: NewFont;
}


Output:

 

Reference: https://lesscss.org/usage/#less-options-rewrite-urls



Last Updated : 24 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads