Can You Import CSS Files into Less?

Integrating CSS Imports into Less Files

When crafting CSS styles, Less offers a powerful framework for modularity and code organization. While Less imports typically involve other Less files, the question arises: can we incorporate external CSS files into this Less ecosystem?

As it turns out, importing CSS files into Less is indeed feasible. To achieve this, we must specify an import option that coerces Less into interpreting the file as CSS. For instance, the following code snippet illustrates this approach:

@import (css) "lib";

This line effectively instructs Less to interpret the file named "lib" as a CSS file, outputting the following:

@import "lib";

Conversely, to import a CSS file and have it treated as Less, use the following syntax:

@import (less) "lib.css";

In this scenario, the "lib.css" file will be imported into your Less file, with the additional benefit of being treated as Less by the compiler. Notably, specifying file-type (less or css) automatically removes the file extension in the output. This technique offers flexibility, allowing you to blend Less's modularity with the familiarity of CSS.

The above is the detailed content of Can You Import CSS Files into Less?. For more information, please follow other related articles on the PHP Chinese website!