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.
Improve this question

4 Answers 4

Reset to default
16

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.

Improve this answer
3
  • Thanks for your answer Vince. It's really helpful. Commented 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! Commented Mar 24, 2023 at 9:46
  • Awesome answer Vince, saved me for losing my mind. Commented Dec 11, 2023 at 18:14
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.

Improve this answer
1
  • I need to try this asap thx Commented 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' },
Improve this answer
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.

Edit Q2 2024:

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

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.