0

Делаю всё по науке - качаю less.min.js отсюда lesscss.ru, кладу в папку проекта, подключаю к страничке следующим образом:

<link rel="stylesheet/less" href="./styles.less" type="text/less">
<script src="./less.min.js" type="text/javascript"></script>

В styles.less у меня лежат стили в less, в less.min.js, соответственно, сам скрипт, но почему-то ничего не подключается. Браузер пишет следующую ошибку:

Failed to load file:///C:/%D0%9F%D0%BE%D1%80%D1%82%D1%84%D0%BE%D0%BB%D0%B8%D0%BE/Site/public/styles.less: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Вопрос - в чем же тут дело? less в файле валидный, проверено Winless.

3
  • а вы не рассматриваете less из пакета gulp ?
    – user33274
    Commented 26 июн. 2018 в 11:29
  • 1
    в вашем случае надо локальный сервер
    – user33274
    Commented 26 июн. 2018 в 11:30
  • Вы открываете страницу как файл (file://...)? Поднимите веб-сервер. Или смотрите как тут люди заводят хром с опцией --allow-file-access-from-files. Когда решите проблему, разместите тут ответ. Проблема не в LESS, а в политике безопасности Хрома Commented 26 июн. 2018 в 11:34

1 ответ 1

0

Большое спасибо за наводку, совершенно забыла про политику безопасности.:)

Пока решала проблему локальным сервером, выяснила, что данный способ подключения стилей к проекту вообще не является оптимальным с точки зрения лишней работы, выполняемой клиентом, и лучше использовать альтернативный - собирать всё (и стили в том числе) в бандл, и подключать уже готовый файл js.

На всякий случай, рецепт - для сборки я использовала Webpack. Для того, чтобы он прочитал стили в less, помимо Webpack, нужно установить загрузчики less-loader, сss-loader, style-loader, и настроить файл webpack.config.js следующим образом:

module.exports = {
entry: './app.js',
output: {
    filename: 'bundle.js'
},
module: {
    rules: [{
      test: /\.less$/, 

      loader: 'style-loader!css-loader!less-loader'
    }]
}

};

В entry указывается файл, который надо собрать, а в output - файл, получаемый на выходе. В loader перечисляем загрузчики для обработки less и css, а в test пишем регулярку, по которой загрузчики находят, какой файл следует обработать. В файле app.js должен быть подключен файл со стилями:

require('./less/main.less');

Теперь после запуска Webpack получаем файл bundle.js, содержащий всю js-логику, стили и зависимости, который и подключаем в index.html:

<script src= "./dist/bundle.js" >

В таком виде всё работает.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.