How to compile sass sourcemap in jekyll

Question

I am using jekyll 3.4.0, I am using sass to model my site. when compiling, it will not create the style.css.map file in the _site folder, which is very useful 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 the original SASS cards.

For my projects, I added the SASS build step for my deployment script that generates the 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

Attention!

Do not forget to configure your web server on server types of SCSS server.

Additional notes

The important thing is that the SCSS source files are also deployed to the web server so that the browser can access them!

sourcemap auto, SCSS.