Magento 2 - css source maps not working
-
11-04-2021 - |
Pregunta
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:
- enabled css source maps in chrome.
- Enabled "Server-side Less compilation" in magento backend
- 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'
},
};
- Executed
grunt exec
- Executed
grunt less
- Executed
grunt clean
- Executed
php bin/magento cache:flush full_page
- Executed
grunt watch
- Then I opened chrome developer tools and inspected some elements, but it still shows "styles-l.css" instead of the actual .less filename.
Solución
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 fromgrunt exec
andgrunt less
get lost.