How to compile sass sourcemap in jekyll

Question

I am using jekyll 3.4.0, i am using sass for styling my website. while compiling, it is won't create style.css.map file in _site folder, which very helpful for debugging.

My config.yml file

markdown: kramdown
port: 8080
sass:
  sass_dir: css
  sourcemap: true
  style: compact

Answer 1

I don't think Jekyll (yet) supports SASS source maps.

For my projects I have added a SASS build step to my deploy script, which generates source map:

#!/bin/bash

# destination folder in which the build result will be stored
DEST="./_site/style"

# folder in which original SCSS files will be places
ORIGINALS=$DEST/originals

# folder in which include SCSS file will be places
INCLUDES=$ORIGINALS/_sass

# remove the previous version of the folder
rm $ORIGINALS -r
mkdir $ORIGINALS

# copy original SASS include files to output folder
cp ./_sass/ $ORIGINALS -r

# name of the entry point SCSS file (without the extension)
SASS_FILE=style

# copying the entry point SCSS file to the output folder
# (removing the frontmatter from the file)
tail -n +3 ./style/$SASS_FILE.scss > $ORIGINALS/$SASS_FILE.scss

# building the entry SCSS file
sass --load-path $INCLUDES --sourcemap=auto $ORIGINALS/$SASS_FILE.scss $DEST/$SASS_FILE.css

Important

Don't forget to configure your web server to server SCSS mime types.

Additional notes

The important thing here is that original SCSS files also get deployed to the web server, so that a browser can access them!

Also sourcemap parameter needs to be set to auto so that correct relative paths to original SCSS files get inserted into sourcemap.