How can I import .css files into my .less files?

Importing .css Files into .less Files

Although it's common practice to import other .less files into your .less projects, it's also possible to import .css files. However, this process requires an additional step.

To include a .css file in your .less file, you must specify the type of file you're importing using the @import directive. For example, if you want to import style.css, you would write:

<code class="less">@import (css) "../style.css";</code>

By specifying (css) before the file path, you force the importer to treat style.css as a CSS file. This ensures that any classes or styles defined in style.css will be available within your .less file.

For instance, suppose style.css contains a class called .type. If you try to use this class in your .less file without specifying the (css) directive, you will encounter an error because .type is not defined within the .less context. However, by using the following code:

<code class="less">@import (css) "../style.css";

.small {
    font-size:60%;
    .type;
}</code>

you can reference styles defined in style.css and access classes like .type seamlessly.

The above is the detailed content of How can I import .css files into my .less files?. For more information, please follow other related articles on the PHP Chinese website!