Magento 2 - css source maps not working

Question

I created a new theme which extends from magento luma. I try to develope with less instead of css.

I need to enable CSS Source maps, so that I can debug my less, it helps to see in which less files the css of certain elements are stored, otherwise It will only show "styles-l.css" or "styles-m.css".

I followed the steps from the documentation.

What I did:

1. enabled css source maps in chrome.
2. Enabled "Server-side Less compilation" in magento backend
3. Added my theme company_base to local-themes.js:

dev/tools/grunt/configs/local-themes.js

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

'use strict';

/**
 * Define Themes
 *
 * area: area, one of (frontend|adminhtml|doc),
 * name: theme name in format Vendor/theme-name,
 * locale: locale,
 * files: [
 * 'css/styles-m',
 * 'css/styles-l'
 * ],
 * dsl: dynamic stylesheet language (less|sass)
 *
 */
module.exports = {
    company_base: {
        area: 'frontend',
        name: 'Company/Base',
        locale: 'de_DE',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    },
};

4. Executed grunt exec
5. Executed grunt less
6. Executed grunt clean
7. Executed php bin/magento cache:flush full_page
8. Executed grunt watch
9. Then I opened chrome developer tools and inspected some elements, but it still shows "styles-l.css" instead of the actual .less filename.

Answer 1

In magento 2.4.4 I had same problem. I fixed it by downgrading to

"grunt-contrib-less": "1.4.1" 

in package.json and running npm install again.

Answer 2

I finally figured it out. The sourcemaps where generated correctly, but in the wrong folder, since I configured my theme incorrectly in dev/tools/grunt/configs/local-themes.js:

Before:

module.exports = {
    company_base: {
        area: 'frontend',
        name: 'Company/Base',
        locale: 'de_DE',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    },
};

After:

module.exports = {
    company_base: {
        area: 'frontend',
        name: 'company/base',       // <-- I had to change it to lower case
        locale: 'de_DE',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    },
};

Open the file registration.php of your theme and check your path:

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

use \Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend/company/base', __DIR__);

As you cans see I used company/base but in my local-theme.js I used Company/Base as name.

---

NOTE: Never execute grunt clean AFTER all the other grunt commands, since this will delete pub/static/frontend/* and the changes from grunt exec and grunt less get lost.

Answer 3

With magento 2.4.x I get the issue and I resolved it by turn off Sign Static Files

Go to backend > Configuration > Advanced > Developer > Sign Static Files > set to NO

then flush cache.