Next.js项目引入react-slick滑块库报CSS模块找不到错误如何解决？

算力阿峰

2026-10-2

问题解决方法

你遇到的报错是因为Next.js默认不识别样式导入路径中的~别名前缀，该前缀通常用于指向项目的node_modules目录，你的项目未做对应适配配置。

方案1：最简修复（推荐）

直接修改_app.tsx中的两行样式导入语句，删除路径前的~即可：

// 把原来的~去掉
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

修改完成后重启开发服务，问题即可解决。

方案2：保留~前缀的适配方法

首先修复你next.config.js中的错误配置：现有配置两次声明module.exports，后一次的withImages配置会直接覆盖前面的withPlugins配置，导致插件配置失效。调整后的完整配置如下：

const path = require('path');
const withPlugins = require("next-compose-plugins");
const withImages = require("next-images");

const nextConfig = {
  webpack: (config) => {
    // 配置~别名指向node_modules目录
    config.resolve.alias['~'] = path.resolve(__dirname, 'node_modules');
    return config;
  }
}

module.exports = withPlugins([withImages], nextConfig);

配置修改完成后重启开发服务，即可正常使用带~前缀的导入写法。