sass - 如何在 jekyll 中编译 sass sourcemap

Question

我正在使用 jekyll 3.4.0，
我正在使用 sass 来设计我的网站。
编译时不会在_site文件夹下创建style.css.map文件，这对调试很有帮助。

我的 config.yml 文件

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

Answer 1

我认为 Jekyll(还)不支持 SASS 源映射。

对于我的项目，我在部署脚本中添加了一个 SASS 构建步骤，它会生成源映射:

#!/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

重要的

不要忘记将您的 Web 服务器配置为服务器 SCSS mime 类型。

补充说明

这里重要的是原始 SCSS 文件 也得到部署 到 Web 服务器，以便浏览器可以访问它们!

还有 sourcemap参数需要设置为 auto以便将原始 SCSS 文件的正确相对路径插入到源映射中。