react slick安装后引入css样式报错

使用react-slick是为了在使用react hook的同时更加方便的实现轮播图。

因为看到antd组件库的走马灯太简单，不好复制，所以自以为找到了cv的好途径。

但，我不知道的是react-slick本身就是基于antd组件库中的走马灯而写，也算是补充样式以及api。

我以为是独立的一个轮播库，像swipper一样。

在我遇到slick的文件找不到的情况下，我找了很多方法，就是最下面那一些方法，但最后出现了bug：在本地时候一切正常，可是到了部署项目之后，再次出现了那个找不到slick的css文件的bug。于是，我在本地重新返回思路，运用slick的scss文件，一如既往出现了ajax-loader.gif找不到或者其他font字体样式无法识别的错误。这个问题大概是需要配置这些特殊字体，但是我不会！so，我决定放弃，回归最原始的方法，用antd基础组件。这时候，我发现了react slick和antd组件库的联系。我开始尝试使用走马灯原始代码，既然react slick中的api就是这个组件的api，那么{...settings}岂不是也能用，so，我试了下，果不其然。

现在，我只需要更改最外层的组件标签名，以及一些细节即可。

至此，轮播问题圆满解决，虽然还是遗留了一个字体配置的问题，但是能跑起来就行。

---

下面都是我走的弯路，但是为了吸取经验，提醒和我遇到一样错误的朋友，暂且保留。

报错主要信息：

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve './ajax-loader.gif' in '***'

./node_modules/slick-carousel/slick/slick-theme.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleParseError: Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.  See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

翻译一下，大致意思是说模块构建失败，导入的slick-theme.css需要配置。

刚开始以为是配置出错导入出错，在网上找到了两个对应方法，分别是：

1. 引入css去掉~

参考官网：React Slick Documentation

2. 根据node_modules文件夹中slick.scss和slick-theme.scss文件，新建_slick.scss和_slickTheme.scss文件，并在app.scss中导入。

参考：reactjs - react-slick: Import CSS from slick-carousel fails - Stack Overflow

一一试过之后，当然是没解决啦。

---

然后我找到了一个方法，删除node_modules文件夹，重新npm i，简单粗暴，索性试一试。

在重新安装依赖之后，提示：

found 21 vulnerabilities (2 low, 3 moderate, 13 high, 3 critical)
run `npm audit fix` to fix them, or `npm audit` for details

ok，fine，听你的。于是我运行了npm audit fix。

but，让我再次运行npm audit fix --force强制修复，不行不行。

npm WARN slick-carousel@1.8.1 requires a peer of jquery@>=1.8.0 but none is installed. You must install peer dependencies yourself.

这句话被我看到了，意思是说slick-carousel需要一个jquery版本大于1.8.1的依赖。

哎嘿，我下载一下，参考：jQuery的版本比较及使用_心越IT的博客-CSDN博客_jquery版本

确定下载的版本号，运行yarn add jquery@1.12.4

回车，yarn start重新运行。

困扰了我好久，终于解决了，记录一下，以防遗忘，同时给予大家帮助。

---

对了，再总结一下在react中使用slick轮播的傻瓜式步骤。

1. 安装：

yarn add react-slick
npm install slick-carousel --save
yarn add jquery@1.12.4

2. 引入：在app.scss中引入

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