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.

3 Answers 3

12

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.

2
  • 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 at 9:46
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

Your Answer

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

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