CODEWITHSUNDEEP
javascriptgruntjslesssource-mapsgrunt-contrib-less
dmathisen
dmathisen

Reputation: 2342

Less SourceMap file location relative to filesystem, not website

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).

Upvotes: 0

Views: 640

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49044

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.

Upvotes: 1

Related Questions