Menu
<head> <link rel="stylesheet/less" href="less/news.less"> </head> <body> <script src="less.js"></script> </body> news.less looks like this;
@import: "libs/base.less" base.less looks like this;
@import "colors.less"; @import "mixins.less"; @import "bootstap.less"; @import "font-aweseome.less" body { background-color: @light-grey; } bootstrap.less and font-awesome.less are CSS files with an altered extension. All the files are in the right folders.
When looking in the browser, styling in base.less is being ignored, meaning that my imports are not working.
Can anyone give any tips?
Thanks!
453
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.
The @import rule tells the CSS engine to import an external style sheet into another style sheet. This allows style rules from a style sheet to be added to another style sheet. This rule can also be used in combination with media queries to import a style sheet based on the device type.
Definition and Usage The @import rule allows you to import a style sheet into another style sheet. The @import rule must be at the top of the document (but after any @charset declaration). The @import rule also supports media queries, so you can allow the import to be media-dependent.
With (css) , the @import directive will remain as-is, and as a result the CSS file will be loaded by the browser at runtime ; with (inline) , the CSS file's contents are actually imported into the compiled stylesheet, which is what you want if that file is out of your web root for example.
Your @import statements must follow this format:
@import "styles.less"; @import "font-aweseome.less" isn't working because there is no semicolon at the end.
@import: "libs/base.less" won't work because there is a colon after the import statement.
125
Why the colon in:
@import: "libs/base.less" I think is better to have a semicolon after all @import-s.
Take a look in the console to make sure the paths are correct, and the browser isn't trying to load a less file from the wrong url.
22
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
