使用CSS模塊進行React-Slick

Question

我正在為我的項目使用帶有CSS模塊的webpack，並且嘗試安裝流行的package react-slick來創建滑塊。 它可以在沙箱中完美運行，但是在原始項目中我遇到了一些困難。 當我嘗試按文檔中所述導入slick.css和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樣式。