如何在 jekyll 中编译 sass 源映射答案

【问题标题】：How to compile sass sourcemap in jekyll如何在 jekyll 中编译 sass 源映射
【发布时间】：2023-03-03 02:52:01
【问题描述】：

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

我的 config.yml 文件

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

【问题讨论】：

标签： sass jekyll

【解决方案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

重要

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

补充说明

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

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

【讨论】：