PostCSS

resources.PostCSS [选项] RESOURCE

resource.Resource

postCSS

设置

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

第一步 ：安装Node.js。

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

npm i -D postcss postcss-cli autoprefixer

第三步 ：在项目根目录中创建一个PostCSS配置文件。文件名必须为postcss.config.js或其他支持的文件名之一。例如：

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

第四步 ：将CSS文件放入assets目录中。

第五步 ：将CSS文件作为资源捕获，然后通过resources.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 }}

选项

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

config ：（字符串）包含PostCSS配置文件的目录。默认为项目目录的根目录。

noMap ：（布尔值）默认为false。如果设为true，禁用内联sourcemap（源映射）。

inlineImports ：（布尔值）默认为false。启用@import语句的内联。它会进行递归操作，但只会导入一次文件。 URL导入（例如@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');）和具有媒体查询的导入将被忽略。 请注意，该导入过程不关心CSS规范，因此您可以在文件的任何位置使用@import。 Hugo将在模块加载时查找导入，并遵守主题覆盖。

skipInlineImportsNotFound New in v0.99.0 ：（布尔值）默认为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 ：（字符串）要使用的PostCSS插件的空格分隔列表。

parser ：（字符串）自定义的PostCSS解析器。

stringifier ：（字符串）自定义的PostCSS字符串转换器。

syntax ：（字符串）自定义的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]
      : []
  ]
}