SCSS引入的Google Font经PostCSS构建后消失问题求助

我正在基于eleventyone模板开发网站，无法正常完成Google Font的引入配置。我在SCSS文件（styles.css）中编写了如下引入语句：

@import 'https://fonts.googleapis.com/css2?family=Nunito&display=swap';

项目使用的PostCSS构建脚本如下：

const fs = require('fs');
const path = require('path');
const postcss = require('postcss');

// 编译入口文件名，同时用于定义输出到/css目录的文件名
const fileName = "styles.css";

module.exports = class {
  async data () {
    const rawFilepath = path.join(__dirname, `../_includes/postcss/${fileName}`);
    return {
      permalink: `css/${fileName}`,
      rawFilepath,
      rawCss: await fs.readFileSync(rawFilepath)
    };  
  };  

  async render ({ rawCss, rawFilepath }) {
    return await postcss([
      // require('postcss-comment'),
      require('precss'),
      require('postcss-import'),
      require('postcss-mixins'),
      require('postcss-color-mix'),
      require('cssnano'),
    ])  
    .process(rawCss, { from: rawFilepath })
    .then(result => result.css);
  };  
}

执行站点构建后，最终生成的styles.css文件中不存在上述字体引入语句。已尝试使用以下插件解决问题，均未生效：

• postcss-import-url
• postcss-google-font
• postcss-font-magician

1. 修正插件顺序与基础配置 #

postcss-import默认仅处理本地文件导入，不会识别HTTP/HTTPS开头的远程导入链接，且PostCSS插件按数组顺序从上到下执行，顺序错误直接导致规则失效：

• 远程URL导入类插件必须放在postcss-import之前执行，否则postcss-import遇到无法解析的远程地址会直接丢弃该条规则
• 不要同时启用多个功能重叠的字体处理插件，避免规则冲突导致导入语句被误删
  正确的插件配置参考：

return await postcss([
  require('precss'),
  // 远程导入插件放在最前，优先处理外部CSS链接
  require('postcss-import-url')({
    modernBrowser: true,
    resolveUrls: false
  }),
  require('postcss-import'), // 后处理本地文件导入
  require('postcss-mixins'),
  require('postcss-color-mix'),
  require('cssnano'),
])

2. 调整cssnano压缩规则 #

cssnano默认开启的postcss-normalize-imports、postcss-discard-unused规则，会将无法解析的远程@import判定为无效规则直接删除，需要手动关闭对应优化项：

require('cssnano')({
  preset: ['default', {
    normalizeUrl: false,
    discardUnused: false,
  }]
})

3. 生产环境更稳妥的替代方案 #

如果插件调整后仍然不生效，直接放弃在CSS文件中远程导入Google Font，改用HTML头部直接引入的方式，完全绕开PostCSS构建链路：
在网站模板的<head>标签内加入字体引入代码：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">

这种方式不会被构建工具误删，还能通过预连接优化字体加载速度，兼容性更好，是生产环境的通用方案。

4. 问题定位步骤 #

• 临时移除cssnano插件执行构建，查看输出的CSS中是否保留@import语句，确认是否为压缩环节删除了规则
• 给PostCSS处理流程添加警告监听，打印构建过程中的报错与提示，查看是否存在导入解析失败的信息：

.process(rawCss, { from: rawFilepath })
.then(result => {
  result.warnings().forEach(warn => console.warn(warn.toString()))
  return result.css
})

• 确认源文件中@import语句的位置：CSS规范要求@import必须写在文件最顶部（@charset声明除外），所有其他样式规则之前，否则部分PostCSS插件会直接丢弃位置不符合规范的@import规则。

内容的提问来源于stack exchange，提问作者Albert