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$
Best Answer
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.