Less SourceMap file location relative to filesystem, not website

Question

I have a file structure that looks like this (simplified for brevity):

/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'
    }
}

In the index file: <link rel="stylesheet" href="/css/styles.css">

Now in dev tools, it's looking for styles.less in http://localhost:3845/less/styles.less, which doesn't exist, since only /public/ is exposed to the website.

It used to map the files to my local machine correctly, without any additional steps, but doesn't anymore. I'm not sure what happened or how to set it up so it does.

I'm using the latest grunt-contrib-less (1.0.0).

Answer 1

The browser can not read the less folder, so remove your Less files to your public folder (or give the web server access to the less folder )

Alternatively set Less's source-map-less-inline and source-map-map-inline options:

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

The above puts the map, with the content of your Less files, into the CSS files.