magento2: Less SourceMaps Path is not corret

Summary (*)

Grunt generate wrong less sourceMaps path, both Chrome and Firefox can not find sourceMaps files

Environment

OS: Ubuntu 18.04 with apache and php 7.1.x Magento Version: 2.3.0

How to Reproduce

Download Magento 2.3.0 Open Source with Sample from Official Site.
Install it on local server.
Install and configure grunt according to https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/css-topics/css_debug.html
Run: grunt clean, grunt exec, grunt less:luma.
Browser can not find less sourceMaps files.

It is very difficult to reproduce on on vanilla Magento instance, as the issue need a lot of CLI operations to install node.js, npm etc.

Examples (*)

Use Grunt to compile Less file, and Grunt add sourceMaps path is: /*# sourceMappingURL=pub/static/frontend/Magento/luma/en_US/css/styles-l.css.map */ In order to let browser to find the sourceMpas file, it should be /*# sourceMappingURL=styles-l.css.map */

Proposed solution

Try to change less.js but failed.

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 28 (12 by maintainers)

Most upvoted comments

@sunilit42 I made some changes on theme

x3: {
        area: 'frontend',
        name: 'Grudado/x3',
        locale: 'pt_BR',
        options: {
            sourceMap: true,
            strictImports: false,
            sourceMapRootpath: '/',
            dumpLineNumbers: false, // use 'comments' instead false to output line comments for source
            ieCompat: false
        },
        files: [
            'css/styles-m',
            'css/styles-l',
            'css/email',
            'css/email-inline'
        ],
        dsl: 'less'
    },

and less.js

var lessOptions = {
    options: {
        sourceMap: true,
        strictImports: false,
        sourceMapRootpath: '/',
        sourceMapFileInline: 'true',
        dumpLineNumbers: false, // use 'comments' instead false to output line comments for source
        ieCompat: false
    },
    setup: {
        files: {
            '<%= path.css.setup %>/setup.css': '<%= path.less.setup %>/_setup.less'
        }
    },
    updater: {
        files: {
            '<%= path.css.updater %>/updater.css': '<%= path.less.setup %>/_setup.less'
        }
    },
    documentation: {
        files: {
            '<%= path.doc %>/docs.css': '<%= path.doc %>/source/docs.less'
        }
    }
};

grudado on Jun 13, 2019

I can confirm adding sourceMapFileInline: ‘true’, in less.js resolved the issue for me on Magento 2.4.6 + PHP8.1

stephen-larkbury on Mar 14, 2023

@leonhelmus: you might need this fix for Magento 2.4.x shops: #28415 (will be released in Magento 2.4.7)

I am sorry, what?. Less compilation has been broken for years and just got fixed in this PR?

sdouma on Aug 21, 2023

@leonhelmus: you might need this fix for Magento 2.4.x shops: https://github.com/magento/magento2/pull/28415 (will be released in Magento 2.4.7)

hostep on Jul 5, 2023

@grudado You helped me out a lot! This resolved my issue. This should be included in 2.4.7!

I just needed to add ourceMapFileInline: ‘true’ to resolve the issue.

leonhelmus on May 23, 2023

It worked for me rename package.json.example to package.json, that is what I was missing. 😃

flahub on Aug 2, 2019