Farm项目中unplugin-auto-import插件导致CSS解析错误的解决方案

在使用Farm构建工具时，开发者可能会遇到一个由unplugin-auto-import插件引起的CSS解析错误问题。这个问题通常表现为在Vue单文件组件中使用SCSS或CSS时，系统抛出"Can not parse app.vue?vue&lang.scss"的错误。

问题根源分析

该问题的根本原因在于unplugin-auto-import插件默认会处理所有Vue文件，包括Vue单文件组件中的样式块。当插件尝试在这些样式块中自动导入Vue的h函数时，会导致CSS解析器无法正确处理这些非CSS内容。

解决方案

要解决这个问题，我们需要配置unplugin-auto-import插件，使其忽略Vue文件中的样式块。具体方法是在插件配置中添加include选项，通过正则表达式精确匹配需要处理的文件类型：

export default defineConfig({
  vitePlugins: [
    AutoImport({
      include: [
        /\.[jt]sx?$/,      // 匹配所有JS/TS/JSX/TSX文件
        /\.vue$/,           // 匹配Vue文件
        /\.vue\?vue.+(?<!\.(scss|css|less))$/  // 匹配Vue文件但不包括样式块
      ],
      imports: [
        'vue',
        'vue-router',
        '@vueuse/core'
      ]
    })
  ]
});

技术细节解析

这个解决方案的关键在于最后一个正则表达式： /\.vue\?vue.+(?<!\.(scss|css|less))$/

这个正则表达式使用了负向零宽断言（negative lookbehind），确保匹配的Vue文件查询字符串不以.scss、.css或.less结尾。这样就能有效排除Vue文件中的样式块，同时仍然处理模板和脚本部分。

最佳实践建议

1. 在使用任何自动导入插件时，都应该明确指定处理的文件类型
2. 对于Vue项目，特别注意样式块的处理
3. 定期检查插件配置，确保与项目依赖版本兼容
4. 在大型项目中，考虑将这类配置提取到共享配置文件中

通过这种精细化的配置，我们既能享受自动导入带来的便利，又能避免因插件处理范围过广而导致的解析错误问题。