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

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.

Answer 3

As this question pops up when searching 'magento 2 source maps not working' I'll add another possible case, I couldn't find anything online about it.

Your store can have different locale compared to specified in local-themes.js (or elsewhere).

I had this situation trying to get source maps working with Luma theme, my store has ru_RU locale while Luma in local-themes.js has en_US, as a result source maps weren't generated in pub/static/frontend/Magento/luma/ru_RU/css.

Fixed it by creating new theme definition in local-themes.js:

luma_ru: {
    area: 'frontend',
    name: 'Magento/luma',
    locale: 'ru_RU',
    files: [
        'css/styles-m',
        'css/styles-l'
    ],
    dsl: 'less'
},

Answer 4

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.

---

Edit Q2 2024:

If it still does not work, then try to apply this fix.