1

Question

我正在为我的项目使用带有CSS模块的webpack，并且尝试安装流行的package react-slick来创建滑块。它可以在沙箱中完美运行，但是在原始项目中我遇到了一些困难。我在尝试导入documentation中提到的slick.css和slick-theme.css时遇到下一个错误：

Module not found: Can't resolve '~slick-carousel/slick/slick-theme.css'

我已经试图避免这种情况的发生：

1

我已安装

npm install file-loader url-loader --save

通过添加下一部分更新了我的webpack.config.js

  {
    test: /\.scss$/,
    loader:
      "style!css!sass?outputStyle=expanded&" +
      "includePaths[]=" +
      path.resolve(__dirname, "./node_modules")
  }

没用

2

已替换

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

使用

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

没用

3

我在项目中手动下载了这两个.css文件，然后直接从文件夹导入它们。

没用。

我应该怎么做才能解决此问题？

Answer 1

您还需要安装slick-carousel。
react-slick只是库的Javascript部分，slick-carousel是css的部分。

按照DOCS：

npm install slick-carousel
@import "~slick-carousel/slick/slick.css";
@import "~slick-carousel/slick/slick-theme.css";

更新
这些导入都在css文件中，请注意路径前的@。

例如，您有一个myStyles.css文件，可以在其中导入slick-carousel样式。

使用CSS模块进行React-Slick

1

2

3

1 个答案: