PostCSS

css.PostCSS [OPTIONS] RESOURCE

resource.Resource

postCSS

设置

按照以下步骤使用任何可用的 PostCSS 插件转换 CSS。

步骤 1

安装Node.js。

步骤 2

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

npm i -D postcss postcss-cli autoprefixer

步骤 3

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

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

步骤 4

将您的 CSS 文件放在 assets 目录中。

步骤 5

将 CSS 文件捕获为资源并将其通过 css.PostCSS（别名 postCSS）传递

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

如果从 assets 目录中的 Sass 文件开始

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

选项

css.PostCSS 方法采用一个可选的选项映射。

配置

(字符串) 包含 PostCSS 配置文件的目录。默认值为项目目录的根目录。

noMap

(布尔值) 默认值为 false。如果为 true，则禁用内联源映射。

inlineImports

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

skipInlineImportsNotFound

(布尔值) 默认值为 false。如果您在 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 配置文件，您可以使用选项映射指定最小配置。

使用

(字符串) 要使用的 PostCSS 插件的空格分隔列表。

解析器

(字符串) 自定义 PostCSS 解析器。

字符串化器

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

语法

(字符串) 自定义 postcss 语法。

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

检查 Hugo 环境

当前 Hugo 环境名称（由 --environment 或在配置或操作系统环境中设置）在 Node 上下文中可用，这允许如下构造

module.exports = {
  plugins: [
    require('autoprefixer'),
    ...process.env.HUGO_ENVIRONMENT === 'production'
      ? [purgecss]
      : []
  ]
}