Не удается подключить LESS к проекту

167
06 августа 2018, 22:10

Делаю всё по науке - качаю 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.

Answer 1

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

Пока решала проблему локальным сервером, выяснила, что данный способ подключения стилей к проекту вообще не является оптимальным с точки зрения лишней работы, выполняемой клиентом, и лучше использовать альтернативный - собирать всё (и стили в том числе) в бандл, и подключать уже готовый файл 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" >

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

READ ALSO
Как нарисовать и аниммировать svg линии?

Как нарисовать и аниммировать svg линии?

Как в SVG нарисовать и анимировать 2 линии, чтобы сначала "нарисовалась" одна прямая, затем вторая?

127