SASS

配置参数

extensions string[]

Extensions processed by this plugin

Default:

[ ".scss", ".sass" ]

format compressed expanded

Output format

Default:

"compressed"

options object

SASS options

See https://sass-lang.com/documentation/js-api/interfaces/options/

includes string

Custom includes paths

Default:

site.options.includes

描述

SASS 插件使用 Deno SASS 库加载和转换你的 .scss 文件。

安装

在你的 _config.ts 文件中导入此插件以使用它：

import lume from "lume/mod.ts";
import sass from "lume/plugins/sass.ts";

const site = lume();

site.use(sass(/* 选项 */));

export default site;

包含

默认情况下，插件配置为在 _includes 目录中查找导入的文件（你可以通过编辑 includes 选项来更改此行为）：

/* 从 _includes/sass/reset.scss 导入 SCSS 文件 */
@import "sass/reset.scss";

/* 扩展名是可选的 */
@import "sass/reset";

/* 使用相对路径导入文件 */
@import "./variables.scss";

输出文件与输入文件具有相同的名称，但扩展名为 .css。 例如，文件 /styles/main.scss 输出 /styles/main.css。 在 HTML 页面中导入样式时，请考虑到这一点。