Update from November 2021: The answer is relevant if you use Sitecore SXA(@sxa/celt) lower than 10.2. And it looks like Sitecore SXA 10.2 was inspired by this answer.
If you use Sitecore SXA 10.2 or higher, please rely on out the box configuration.
It looks like it could not be done with SXA CLI out of the box. But, it is possible to do with modification of SXA gulp scripts.
Option 1: Quick and dirty.
It is possible to save CSS source map in the same .css file. (it doesn't work for production, but for all other environments it should be OK)
- Open
\node_modules\@sxa\celt\util\cssMinificator.js
- Change
gulpSourcemaps.write('./')
togulpSourcemaps.write()
Option 2: Long, but proper way
It is possible to save CSS source map file in a file with any filename. We need only to specify proper path at the end of css
file itself.
- Open
\node_modules\@sxa\celt\util\cssMinificator.js
- Extend
gulpSourcemaps.write('./')
with
gulpSourcemaps.write('./', {
mapFile: function (mapFilePath) {
// source map files are named *-css.map instead of *.css.map
return mapFilePath.replace('.css.map', '-css.map');
}
}
It will save pre-optimize-min.css.map
to pre-optimize-min-css.map
Duplicate
node_modules\@sxa\celt\tasks\uploadCss.js
andnode_modules\@sxa\celt\tasks\watchCss.js
touploadMap.js
andwatchMap.js
files.Change newly created files to work with
.map
instead of.css
Make appropriate changes in main
gulpfile.js
The more details with all code examples are available in my blog post.