Next.js中使用animate.css遇:root选择器非纯选择器编译错误

问题概况 #

在Next.js项目中引入animate.css时编译失败，报错信息：

./node_modules/animate.css/animate.css:8:1 语法错误：选择器":root"非纯选择器（纯选择器必须包含至少一个本地类或ID）

解决方案 #

1. 使用全局引入方式 #

在pages/_app.js（或_app.tsx）中直接全局引入animate.css，Next.js会将其识别为全局样式，跳过纯选择器检查：

import 'animate.css';

之后在组件中直接使用animate.css提供的类名即可，比如：

<div className="animate__animated animate__bounce">动画元素</div>

2. 配置webpack排除animate.css的CSS模块规则 #

如果需要局部控制样式加载，可修改next.config.js，让webpack不对animate.css应用CSS模块的校验规则：

module.exports = {
  webpack: (config) => {
    // 遍历所有CSS规则，排除animate.css的模块处理
    config.module.rules.forEach(rule => {
      if (rule.test.toString().includes('.css')) {
        rule.exclude = /node_modules\/animate.css/;
      }
    });
    return config;
  },
};

3. 升级Next.js版本 #

部分旧版本的Next.js对第三方CSS库的全局选择器兼容性较差，升级到最新稳定版（比如13+）可能自动解决该问题。

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