8

How do you enable CSS source Maps for Magento 2's front-end workflow.

I'm learning M2 and have created a custom theme, called "mytheme", inheriting from the out-of-box luma theme. I'd like to use source Maps to navigate the maze of less files.

My local dev server compiles the LESS files but I've also set up grunt to compile LESS. I've also checked that dev/tools/grunt/configs/less.js has sourceMap: true,.

As you can see from the console output below, I cleared the cache, started the grunt watch process but still no CSS source map was generated. Am I missing something?

magento2$ php bin/magento cache:clean; php bin/magento cache:flush; rm -rf pub/static/frontend/Holy/mytheme/en_IE/ ; rm -rf var/view_pre
processed/
Cleaned cache types:
config
layout
block_html
collections
reflection
db_ddl
eav
customer_notification
full_page
config_integration
config_integration_api
translate
config_webservice
Flushed cache types:
config
layout
block_html
collections
reflection
db_ddl
eav
customer_notification
full_page
config_integration
config_integration_api
translate
config_webservice
magento2$ php bin/magento cache:clean; php bin/magento cache:flush; rm -rf pub/static/frontend/Holy/mytheme/en_IE/ ; rm -rf var/view_preprocessed/
Cleaned cache types:
config
layout
block_html
collections
reflection
db_ddl
eav
customer_notification
full_page
config_integration
config_integration_api
translate
config_webservice
Flushed cache types:
config
layout
block_html
collections
reflection
db_ddl
eav
customer_notification
full_page
config_integration
config_integration_api
translate
config_webservice

then...

magento2$ grunt watch
Running "watch" task
Waiting...
>> File "pub/static/frontend/Holy/mytheme/en_US/css/source/_extend.less" changed.
Running "less:mytheme" (less) task
File pub/static/frontend/Holy/mytheme/en_US/css/styles-m.css created: 333.74 kB → 574.02 kB
File pub/static/frontend/Holy/mytheme/en_US/css/styles-l.css created: 80.3 kB → 138.41 kB

Done, without errors.


Execution Time (2017-03-22 22:29:06 UTC-0)
loading tasks                3.3s  ▇▇▇▇▇▇▇▇▇▇ 7%
loading grunt-contrib-less  985ms  ▇▇▇ 2%
less:mytheme                   43.7s  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 91%
Total 48s

Completed in 51.030s at Wed Mar 22 2017 22:29:54 GMT+0000 (UTC) - Waiting...
^C

Execution Time (2017-03-22 22:28:52 UTC-0)
Total 1m 32.7s

then...

magento2$ find . -type f -name "*css.map"
./node_modules/convert-source-map/test/fixtures/map-file-comment.css.map
magento2$ 

1 Answer 1

3

ok so I cam back to this and I got it working, the issue was simply that I had the Front-end development workflow set to Client Side compilation, which was overriding the CSS files created by Grunt and using less.js library instead.

6
  • Still now showing. Any hints? It is also enabled in chrome developer tools settings
    – Black
    Feb 28, 2020 at 17:25
  • Magento devdocs have a good article on how to do this now devdocs.magento.com/guides/v2.3/frontend-dev-guide/css-topics/…
    – Holly
    Mar 1, 2020 at 22:35
  • There is no info about how to enable the CSS Map, other than activating it in the browser which I already did as I said.
    – Black
    Mar 2, 2020 at 7:32
  • Have you followed all the steps in that doc? > When using Grunt for styles preprocessing, you can enable the CSS source maps generation in your browser.
    – Holly
    Mar 2, 2020 at 7:47
  • You only need to enable sourcemaps in your browser, they will be available once you compile the LESS files with Magento's grunt configuration
    – Holly
    Mar 2, 2020 at 7:49

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.