Menu
Even after reading https://github.com/cloudhead/less.js/issues/212, I don't understand the meaning of the @import-once statement.
492
Less (Leaner Style Sheets; sometimes stylized as LESS) is a dynamic preprocessor style sheet language that can be compiled into Cascading Style Sheets (CSS) and run on the client side or server side.
The @import directive is used to import the files in the code. It spreads the LESS code over different files and allows to maintain the structure of code easily. You can put the @import statements anywhere in the code. For instance, you can import the file by using @import keyword as @import "file_name.
Most likely you need to compile you're Less Files into CSS. You can do this manually, or with a task runner like Gulp. If you already have compiled the file, it could be that the compiled css file is cached in the browser and the browser cache needs to be cleared.
When you work with LESS you can have few less files (I have like 12 including media-queries, resets, etc), and sometimes you don't have the control of how many @import you have done between files, and that's the reason behind @import-once, to avoid style duplication.
@import-once instead @import?Suppose you have main.less which imports other less files. And those files all import utils.less that contains useful mixins or variables. When you do this, the mixins get duplicated in the compiled code (css file). Once for each time utils.less was imported, even your CSS file should be 1mb instead 20kb. In case like this one you should use @import-once.
EDIT:
As pointed by @TJ, since LESS 1.4.0, @import-once is removed and is now default behavior for @import.
139
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
