Меньшее расположение файла SourceMap относительно файловой системы, а не веб-сайта

Question

У меня есть файловая структура, которая выглядит так (упрощенно для краткости):

/less/
     /styles.less
/public/
       /css/
           /styles.css
           /styles.css.map
       /images/
       index.php
/gruntfile.js

Gruntfile.js:

less: {
    options: {
        sourceMap: true,
        sourceMapFilename: 'public/css/styles.css.map',
        sourceMapURL: '/css/styles.css.map',
        sourceMapRootpath: '/'
    }
    files: {
        'public/css/styles.css': 'less/styles.less'
    }
}

В индексном файле: <link rel="stylesheet" href="/css/styles.css">

Теперь в Dev Tools, он ищет styles.less в http://localhost:3845/less/styles.less, который не существует, так как только /public/ выставлен на сайт.

Раньше он правильно отображал файлы на моем локальном компьютере, без каких-либо дополнительных шагов, но больше не работает. Я не уверен, что случилось или как это настроить.

Я использую последнюю версию grunt-contrib-less (1.0.0).

Answer 1

Браузер не может прочитать папку Less, поэтому удалите файлы Less в общую папку (или предоставьте веб-серверу доступ к less папка)

В качестве альтернативы установите меньше source-map-less-inline а также source-map-map-inline опции:

options: {
sourceMap: true,
sourceMapFileInline: true,
outputSourceFiles: true
}

Вышеизложенное помещает карту с содержимым ваших файлов Less в файлы CSS.