The @import-once directive in LESS CSS ensures that a specific file is imported only once within LESS files, even if the same file is imported multiple times using @import in the code. This helps avoid style conflicts caused by repeated imports and improves compilation efficiency.
For example, consider a general stylesheet file variables.less which defines multiple variables and styles used across the entire site. In a large project, multiple LESS files may need to use these variables and styles. If using the standard @import directive, the content of variables.less is repeatedly loaded and processed each time it is referenced, resulting in duplicate style definitions in the final CSS file, increasing the output file size and potentially causing styling errors.
By using @import-once, you can ensure that variables.less is loaded only once throughout the stylesheet, regardless of how many times it is referenced, effectively managing the project's style dependencies and output efficiency. This is particularly useful in large projects, significantly optimizing build times and the quality of the final output.
// In main.less @import-once "variables.less"; @import-once "mixins.less"; // Other stylesheet code...
In the above example, regardless of whether variables.less and mixins.less are referenced again in other files, they are each imported only once, ensuring the uniqueness of style definitions and overall project compilation performance.