How to Import CSS Files into LESS Files without Errors?

Importing CSS Files into LESS Files

As a seasoned LESS developer, you might be accustomed to importing other LESS files into your projects, leveraging the powerful LESS preprocessor. However, you may encounter a dilemma when attempting to import a CSS file into LESS.

Problem:

When importing a CSS file (.css) into a LESS file (.less) using the standard @import directive, you might observe the following error:

NameError: .type is undefined

This error indicates that a certain class (.type) referenced in the imported CSS file cannot be recognized within the LESS file.

Solution:

The solution lies in specifying a file format option while importing the CSS file. This option explicitly informs LESS how to interpret the imported file.

To specify the file format option, use the following syntax:

@import (format) "file_name";

Where format can be:

• css: Interpret the imported file as a CSS file.
• less: Interpret the imported file as a LESS file.

Using this approach, to import a CSS file and treat it as CSS, use the following directive:

@import (css) "style.css";

This directive instructs LESS to interpret "style.css" as a CSS file, allowing you to access its styles, including the ".type" class, within your LESS file.

Remember, this file format option provides flexibility in managing imported files. For example, you can import a LESS file without specifying the ".less" extension by using the "(less)" option.

The above is the detailed content of How to Import CSS Files into LESS Files without Errors?. For more information, please follow other related articles on the PHP Chinese website!