如何让Parcel将Vue单文件组件的CSS内联到HTML头部的style标签？

针对你用Google Apps Script + Google Sites部署Vue单文件组件应用的场景，要让Parcel把打包生成的独立CSS内联到HTML头部，有两种实用方案：

方案一：用PostHTML插件自动内联（推荐） #

Parcel支持通过PostHTML插件处理HTML，自动将外部CSS内联到style标签：

1. 安装依赖

npm install posthtml posthtml-inline-css --save-dev

2. 在项目根目录创建.posthtmlrc配置文件

{
  "plugins": {
    "posthtml-inline-css": {
      "removeLinkTags": true
    }
  }
}

3. 正常执行打包命令

parcel build ./index.html

打包完成后，Parcel会自动把生成的CSS内容插入到HTML的<head>内的<style>标签里，同时移除原来的外部CSS引用标签。

方案二：用Node脚本手动处理（应急方案） #

如果插件适配有问题，可以用简单脚本完成内联：

1. 在项目根目录创建inline-css.js脚本

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

// 读取打包后的文件
const cssPath = path.join(__dirname, 'dist/style.css');
const htmlPath = path.join(__dirname, 'dist/index.html');

const cssContent = fs.readFileSync(cssPath, 'utf8');
let htmlContent = fs.readFileSync(htmlPath, 'utf8');

// 插入内联样式并移除原link标签
htmlContent = htmlContent.replace('</head>', `<style>${cssContent}</style></head>`);
htmlContent = htmlContent.replace(/<link rel="stylesheet".*?>/g, '');

// 写入修改后的HTML
fs.writeFileSync(htmlPath, htmlContent);
// 删除独立的CSS文件（可选）
fs.unlinkSync(cssPath);

2. 修改package.json的打包命令

"scripts": {
  "build": "parcel build ./index.html && node inline-css.js"
}

3. 执行打包

npm run build

两种方案都能实现将Parcel生成的独立CSS内联到HTML头部，适配Google Apps Script和Google Sites的部署要求。

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