Skip to main content
added 264 characters in body
Source Link
Anton
  • 3.9k
  • 12
  • 29

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)

  1. Open \node_modules\@sxa\celt\util\cssMinificator.js
  2. Change gulpSourcemaps.write('./') to gulpSourcemaps.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.

  1. Open \node_modules\@sxa\celt\util\cssMinificator.js
  2. 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

  1. Duplicate node_modules\@sxa\celt\tasks\uploadCss.js and node_modules\@sxa\celt\tasks\watchCss.js to uploadMap.js and watchMap.js files.

  2. Change newly created files to work with .map instead of .css

  3. Make appropriate changes in main gulpfile.js

The more details with all code examples are available in my blog post.

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)

  1. Open \node_modules\@sxa\celt\util\cssMinificator.js
  2. Change gulpSourcemaps.write('./') to gulpSourcemaps.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.

  1. Open \node_modules\@sxa\celt\util\cssMinificator.js
  2. 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

  1. Duplicate node_modules\@sxa\celt\tasks\uploadCss.js and node_modules\@sxa\celt\tasks\watchCss.js to uploadMap.js and watchMap.js files.

  2. Change newly created files to work with .map instead of .css

  3. Make appropriate changes in main gulpfile.js

The more details with all code examples are available in my blog post.

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)

  1. Open \node_modules\@sxa\celt\util\cssMinificator.js
  2. Change gulpSourcemaps.write('./') to gulpSourcemaps.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.

  1. Open \node_modules\@sxa\celt\util\cssMinificator.js
  2. 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

  1. Duplicate node_modules\@sxa\celt\tasks\uploadCss.js and node_modules\@sxa\celt\tasks\watchCss.js to uploadMap.js and watchMap.js files.

  2. Change newly created files to work with .map instead of .css

  3. Make appropriate changes in main gulpfile.js

The more details with all code examples are available in my blog post.

Source Link
Anton
  • 3.9k
  • 12
  • 29

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)

  1. Open \node_modules\@sxa\celt\util\cssMinificator.js
  2. Change gulpSourcemaps.write('./') to gulpSourcemaps.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.

  1. Open \node_modules\@sxa\celt\util\cssMinificator.js
  2. 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

  1. Duplicate node_modules\@sxa\celt\tasks\uploadCss.js and node_modules\@sxa\celt\tasks\watchCss.js to uploadMap.js and watchMap.js files.

  2. Change newly created files to work with .map instead of .css

  3. Make appropriate changes in main gulpfile.js

The more details with all code examples are available in my blog post.