Меньше @import не работает 

<head>
    <link rel="stylesheet/less" href="less/news.less">
</head>
<body>
    <script src="less.js"></script>
</body>

news.less выглядит следующим образом:

@import: "libs/base.less"

base.less выглядит следующим образом:

@import "colors.less";
@import "mixins.less";
@import "bootstap.less";
@import "font-aweseome.less"

body {
    background-color: @light-grey;
}

bootstrap.less и font-awesome.less - файлы CSS с измененным расширением. Все файлы находятся в правильных папках.

При просмотре в браузере стилизация в base.less игнорируется, что означает, что мой импорт не работает.

Кто-нибудь может дать какие-либо советы?

Спасибо!

Ответы

Ответ 1

Операторы @import должны соответствовать этому формату:

@import "styles.less";

@import "font-aweseome.less" не работает, поскольку в конце нет точки с запятой.

@import: "libs/base.less" не будет работать, потому что после оператора импорта есть двоеточие.

Ответ 2

Почему двоеточие в:

@import: "libs/base.less"

Я думаю, лучше иметь точку с запятой после @import-s.

Посмотрите на консоль, чтобы убедиться, что пути верны, и браузер не пытается загрузить меньше файлов с неправильного URL-адреса.

Ответ 3

Попробуйте следующее: @import url ( "Ваш путь" );

Ответ 4

1.Используйте свой base.less в news.less, например,

    @import "libs/base.less";

2.Загрузите файл news.less в html

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

Библиотека 3.Refer less.js в html

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