Vite加载TinyMCE CSS时?inline参数未按预期生效问题

核心原因 #

Vite对资源导入的处理逻辑中，?inline在部分场景下（尤其是依赖包内的CSS文件）可能未完全跳过自动注入；?raw虽能获取文本，但如果导入路径指向TinyMCE编译后的资源，可能存在额外处理逻辑干扰，导致CSS仍被注入<head>引发冲突。

可行解决方案 #

1. 自定义Vite插件拦截资源处理 #

编写极简Vite插件，专门针对TinyMCE的content类CSS文件，强制以原始文本形式导入，避免自动注入：

// vite.config.js
export default {
  plugins: [
    {
      name: 'tinymce-content-css-raw',
      transform(code, id) {
        // 匹配TinyMCE的content.css和contentUi.css文件，可根据实际路径调整
        if (/tinymce\/(content|contentUi)\.css$/.test(id)) {
          return `export default ${JSON.stringify(code)}`;
        }
      }
    }
  ]
};

之后直接导入CSS文件，无需加?inline或?raw参数：

import contentCss from 'tinymce/content.css';
import contentUiCss from 'tinymce/contentUi.css';

tinymce.init({
  content_style: `${contentCss}\n${contentUiCss}`
});

2. 手动读取CSS文件内容 #

如果插件方案嫌麻烦，可直接用Node.js的fs模块读取文件内容（需在Vite中配置允许访问对应目录）：

// 先在vite.config.js中添加目录权限配置：
export default {
  server: {
    fs: {
      allow: ['node_modules/tinymce']
    }
  }
};

// 再在初始化代码中读取文件：
import fs from 'fs';
import path from 'path';

const contentCssPath = path.resolve('node_modules/tinymce/content.css');
const contentUiCssPath = path.resolve('node_modules/tinymce/contentUi.css');

const contentCss = fs.readFileSync(contentCssPath, 'utf8');
const contentUiCss = fs.readFileSync(contentUiCssPath, 'utf8');

tinymce.init({
  content_style: `${contentCss}\n${contentUiCss}`
});

3. 调整Vite版本 #

Vite 3.1.0存在部分资源导入处理的bug，可尝试降级到3.0.0或升级到3.2.x及以上稳定版本，部分用户反馈升级后?inline参数能正常生效。

验证方法 #

启动项目后，通过浏览器开发者工具检查<head>标签，确认未自动注入TinyMCE的content.css和contentUiCss，同时查看编辑器内元素是否正确应用样式。

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