PostCSS

2 分钟阅读

PostCSS

使用任何可用的插件，使用PostCSS处理CSS文件。

语法

resources.PostCSS RESOURCE [OPTIONS]
postCSS RESOURCE [OPTIONS]

设置

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

Step 1
安装 Node.js.
Step 2
在项目的根目录中安装所需的Node.js包。例如，添加vendor 前缀到CSS规则：

1
npm install postcss postcss-cli autoprefixer

Step 3
在项目的根目录中创建PostCSS配置文件。您必须将此文件命名为 postcss.config.js 或其他supported file names之一。例如：

postcss.config.js

1
2
3
4
5
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
};

如果您是Windows用户，且项目路径包含空格，则必须将PostCSS配置放置在package.json文件中。参见此示例和问题#7333。

Step 4
将CSS文件放置在 assets 目录中。
Step 5
将CSS文件作为资源捕获，并通过 resources.PostCSS （别名 postCSS ）进行管道处理：

layouts/partials/css.html

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

如果在 assets 目录中使用Sass文件：

layouts/partials/css.html

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

选项

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

config
( string ) 包含PostCSS配置文件的目录。默认为项目目录的根目录。
noMap
( bool ) 默认为 false 。如果为 true ，则禁用内联源地图（sourcemaps）。
inlineImports
( bool ) 默认为 false 。启用@import语句的内联。它会递归执行，但只会导入一次文件。URL导入（例如 @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); ）和带媒体查询的导入将被忽略。请注意，此导入例程不关心CSS规范，因此您可以在文件中的任何地方使用@import。Hugo将查找相对于模块挂载的导入并遵守主题覆盖。
skipInlineImportsNotFound New in v0.99.0
( bool ) 默认为 false 。在Hugo 0.99.0之前，当启用 inlineImports 并且我们无法解析导入时，我们会将其记录为警告。现在我们将构建失败。如果您的CSS中有常规CSS导入要保留，则可以使用带URL的导入或媒体查询（Hugo不会尝试解决这些导入），或将 skipInlineImportsNotFound 设置为true。

layouts/partials/css.html

1
2
3
4
{{ $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 语法。

layouts/partials/css.html

1
2
3
4
{{ $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 上下文中可用，这使得可以使用如下结构：

postcss.config.js

1
2
3
4
5
6
7
8
module.exports = {
  plugins: [
    require('autoprefixer'),
    ...process.env.HUGO_ENVIRONMENT === 'production'
      ? [purgecss]
      : []
  ]
}

另请参阅

最后修改 May 22, 2023: 第一次提交 (9f24e27)