如何在jekyll中编译sass源图

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 文件的正确相对路径插入到源映射中。