less @import not working

css web less

Kevin Lewis · Mar 17, 2013 · Viewed 38.2k times · Source

<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!

Answer

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.