CODEWITHSUNDEEP
csswebless
Kevin Lewis
Kevin Lewis

Reputation: 1085

less @import not working

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

Upvotes: 27

Views: 46337

Answers (5)

Fel
Fel

Reputation: 362

to import is 

@import "styles.less";

Upvotes: 0

Abdul Basit
Abdul Basit

Reputation: 84

Try this: @import url('Your Path');

Upvotes: 0

Dhayalan
Dhayalan

Reputation: 57

1.Import your base.less in news.less like, 

    @import "libs/base.less";

2.Refer your news.less file in the html

    <link  rel="stylesheet/less" type="text/css"  href="less/news.less"/>

3.Refer less.js library in the html

    <script src="lib/less.js"></script>

Upvotes: -1

jonschlinkert
jonschlinkert

Reputation: 11007

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.

Upvotes: 51

Tam&#225;s Pap
Tam&#225;s Pap

Reputation: 18273

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.

Upvotes: 4

Related Questions