LESS - Import Options Optional Keyword

Description

The optional keyword allows you to import a file whenever a file does not exist. If the file to be imported does not exist and the optional keyword is not used then, LESS throws FileError error and stops compiling. This functionality was released in version 2.3.0.

Example

The following example demonstrates the use of optional keyword in the LESS file −

<html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>Import Options Optional</title>
   </head>

   <body>
      <h1>Welcome to Tutorialspoint</h1>
      <p>LESS is a CSS pre-processor that enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Next, create the style.less file.

style.less

@import (optional) "fileNotExist.css";
p {
   color: red;
}

You can compile the style.less to style.css by using the following command −

lessc style.less style.css

Execute the above command; it will create the style.css file automatically with the following code −

style.css

@import "fileNotExist.css";
p {
   color: red;
}

Output

Follow these steps to see how the above code works −

Save the above html code in the import_options_optional.html file.
Open this HTML file in a browser, the following output will get displayed.

Even though the fileNotExist.css file does not exist, LESS will continue compiling and will create the style.css file automatically.

less_import_options.htm