resources.PostCSS

resources.PostCSS [OPTIONS] RESOURCE

resource.Resource

postCSS

{{ with resources.Get "css/main.css" | postCSS }}
  <link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}

设置

按照下列步骤使用任意的 PostCSS 插件 来转换 CSS。

Step 1

安装 Node.js。

Step 2

在项目的根目录中安装所需的 Node.js 包。例如，要为 CSS 规则添加厂商前缀:

npm i -D postcss postcss-cli autoprefixer

Step 3

在项目的根目录中创建一个 PostCSS 配置文件。你必须将此文件命名为 postcss.config.js 或其他支持的文件名。例如:

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
};

Step 4

将你的 CSS 文件放在 assets/css 目录中。

Step 5

使用 PostCSS 处理资源:

{{ with resources.Get "css/main.css" | postCSS }}
  <link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}

选项

resources.PostCSS 方法可以接受一个可选的选项映射。

config

(string) 包含 PostCSS 配置文件的目录。默认为项目目录的根目录。

noMap

(bool) 默认值为 false。如果为 true，则禁用内联 Source Map。

inlineImports

(bool) 默认值为 false。启用 @import 语句的内联。它会递归地执行内联导入，但每个文件只会被导入一次。URL 导入 (例如 @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');) 和带有媒体查询的导入将被忽略。请注意，此导入过程不关心 CSS 规范，因此你可以在文件中的任何位置使用 @import。Hugo 将在模块挂载的位置寻找导入文件，并遵循主题覆盖。

skipInlineImportsNotFound

(bool) 默认值为 false。在 Hugo 0.99.0 版本之前，当启用 inlineImports 且无法解析导入时，我们会将其记录为警告。现在我们会在构建时失败。如果你在 CSS 中有常规的 CSS 导入需要保留，可以使用带有 URL 或媒体查询的导入（Hugo 不会尝试解析这些），或者将 skipInlineImportsNotFound 设置为 true。

{{ $opts := dict "config" "config-directory" "noMap" true }}
{{ with resources.Get "css/main.css" | postCSS $opts }}
  <link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}

无需配置文件

如果不想使用 PostCSS 配置文件，可以使用选项映射指定一个最小的配置。

use

(string) 一个用空格分隔的要使用的 PostCSS 插件列表。

parser

(string) 自定义的 PostCSS 解析器。

stringifier

(string) 自定义的 PostCSS 字符串化器。

syntax

(string) 自定义的 postcss 语法。

{{ $opts := dict "use" "autoprefixer postcss-color-alpha" }}
{{ with resources.Get "css/main.css" | postCSS $opts }}
  <link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}

检查环境

当前的 Hugo 环境名称（通过 --environment、配置或操作系统环境进行设置）在 Node 上下文中可用，这允许使用如下结构:

const autoprefixer = require('autoprefixer');
const purgecss = require('@fullhuman/postcss-purgecss');
module.exports = {
  plugins: [
    autoprefixer,
    process.env.HUGO_ENVIRONMENT !== 'development' ? purgecss : null
  ]
}