2

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

enter image description here

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'
    },
};
  1. Executed grunt exec
  2. Executed grunt less
  3. Executed grunt clean
  4. Executed php bin/magento cache:flush full_page
  5. Executed grunt watch
  6. Then I opened chrome developer tools and inspected some elements, but it still shows "styles-l.css" instead of the actual .less filename.

4 Answers 4

15

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.

3
  • Thanks for your answer Vince. It's really helpful. Jun 23, 2022 at 11:04
  • Yes! I've been fighting this issue since yesterday. Downgrading "grunt-contrib-less" to the suggested version did fix the issue! Then I just ran grunt commands as usual and source-maps were generated normally. Thank you! Mar 24, 2023 at 9:46
  • Awesome answer Vince, saved me for losing my mind.
    – Rus0
    Dec 11, 2023 at 18:14
1

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.

1

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.

1
  • I need to try this asap thx
    – Black
    Sep 6, 2022 at 7:19
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.