PostCSS

配置参数

extensions string[]

The list of extensions this plugin applies to

Default:

[ ".css" ]

includes string boolean

Custom includes path for postcss-import

Default:

site.options.includes

plugins any[]

Plugins to use by postcss

Default:

[autoprefixer()]

useDefaultPlugins boolean

Set false to remove the default plugins

Default:

true

name string

The name of the helper

Default:

"postcss"

描述

PostCSS 插件使用 PostCSS 处理器加载和转换你的 CSS 文件。

安装

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

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

const site = lume();

site.use(postcss(/* Options */)); // 选项

export default site;

PostCSS 插件

PostCSS 默认启用了 postcss_autoprefixer 插件，以自动添加 vendor prefixes。

使用 plugins 属性添加更多插件。例如，要使用 postcss-nesting 插件：

import postcss from "lume/plugins/postcss.ts";
import nesting from "npm:postcss-nesting";

site.use(postcss({
  plugins: [nesting()],
}));

Includes

PostCSS 插件使用 postcss-import，通过在 _includes 目录中查找来内联本地的 @imports。

/* 从 _includes/css/reset.css 导入 CSS 文件 */
@import "css/reset.css";

/* 导入相对路径的 CSS 文件 */
@import "./variables.css";

你可以更改 CSS 文件的 _includes 目录，或者使用 includes 选项完全禁用它：

// 将 CSS 的 includes 文件夹更改为 _styles
site.use(postcss({
  includes: "_styles",
}));

// 禁用 includes（本地的 @import 将不会被内联）
site.use(postcss({
  includes: false,
}));

Hooks

此插件公开了以下 hooks：

• addPostcssPlugin(plugin) 用于添加额外的插件。
• postcss(processor) 用于以底层方式修改处理器实例。

import lume from "lume/mod.ts";
import postcss from "lume/plugins/postcss.ts";
import nano from "npm:cssnano";

const site = lume();

site.use(postcss());

site.hooks.addPostcssPlugin(nano);

export default site;

postcss 过滤器

此插件还注册了 postcss 过滤器，以便你可以在模板引擎中转换 CSS 代码。例如：

{{ set css }}
  body::after {
    content: "Hello, the CSS world!";
  }
{{ /set }}

<style>
  {{ css |> postcss }}
</style>

配置 VSCode

你可以使用 Postcss extension for VS Code 扩展来为 VS Code 配置语法高亮。