使用Vite集成react-slick时导入CSS文件报错求助

问题描述 #

在Vite+React项目中使用react-slick轮播组件时，导入以下两个CSS文件出现解析失败错误：

Failed to resolve import "slick-carousel/slick/slick.css" and import "slick-carousel/slick/slick-theme.css";;
import "slick-carousel/slick/slick.css";;
import "slick-carousel/slick/slick-theme.css";

相关代码如下：

import React, { Component } from "react";
import Slider from "react-slick";
import Images from "../../../../assets/images/Images";

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

// IMAGES DATA FOR CAROUSEL
interface Data {
  imgSrc: string;
}

const data: Data[] = [
  {
    imgSrc: Images.Airbnb,
  },
  {
    imgSrc: Images.Fedex,
  },
  {
    imgSrc: Images.Google,
  },
  {
    imgSrc: Images.Hubspot,
  },
  {
    imgSrc: Images.Microsoft,
  },
  {
    imgSrc: Images.Walmart,
  },
  {
    imgSrc: Images.Airbnb,
  },
  {
    imgSrc: Images.Fedex,
  },
];

// CAROUSEL SETTINGS
export default class CompanyCarasouls extends Component {
  render() {
    const settings = {
      dots: false,
      infinite: true,
      slidesToShow: 4,
      slidesToScroll: 1,
      arrows: false,
      autoplay: true,
      speed: 2000,
      autoplaySpeed: 2000,
      cssEase: "linear",
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 4,
            slidesToScroll: 1,
            infinite: true,
            dots: false,
          },
        },
        {
          breakpoint: 700,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 1,
            infinite: true,
            dots: false,
          },
        },
        {
          breakpoint: 500,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1,
            infinite: true,
            dots: false,
          },
        },
      ],
    };

    return (
      <div
        style={{ textAlign: "center", marginTop: "20px", marginBottom: "20px" }}
      >
        <div
          className="mx-auto max-w-4xl px-4 sm:px-6 lg:max-w-7xl lg:px-8"
          style={{ margin: "auto", width: "100%" }}
        >
          <h2 className="text-midnightblue text-2xl font-semibold">
            Trusted by companies of all sizes
          </h2>
          <div className="py-14">
            <Slider {...settings}>
              {data.map((item, i) => (
                <div key={i}>
                  <img
                    src={item.imgSrc}
                    alt={item.imgSrc}
                    width={116}
                    height={36}
                  />
                </div>
              ))}
            </Slider>
          </div>
          <hr />
        </div>
      </div>
    );
  }
}

解决步骤 #

1. 安装缺失的依赖 #

react-slick依赖slick-carousel包提供样式文件，若只安装了react-slick而未安装slick-carousel，会导致路径解析失败。执行以下命令安装：

npm install slick-carousel --save
# 或使用yarn
yarn add slick-carousel

2. 验证文件路径 #

安装完成后，检查项目根目录下的node_modules/slick-carousel/slick/文件夹，确认slick.css和slick-theme.css是否存在。若路径不符，需调整导入语句为实际存在的路径。

3. 清除缓存并重启服务 #

Vite的缓存可能导致路径解析异常，删除node_modules/.vite文件夹后重新启动开发服务器：

rm -rf node_modules/.vite
npm run dev

4. 调整导入路径（可选） #

若上述步骤无效，尝试改用基于项目根目录的绝对路径导入：

import "../node_modules/slick-carousel/slick/slick.css";
import "../node_modules/slick-carousel/slick/slick-theme.css";

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