CSS 文件中的更改不会影响 React-Slick

Question

我正在尝试更改我在 GatsbyJS 项目中使用的 React-Slick 旋转木马的样式。在我的 Slider 组件中，我按照官方文档中显示的方式导入库：

import Slider from "react-slick"
import "slick-carousel/slick/slick.css"
import "slick-carousel/slick/slick-theme.css"

现在我想更改轮播的样式，所以我转到 node_modules/slick-carousel/slick/slick.css 并编辑一些样式。但它不会影响轮播的外观。在我浏览器的开发工具中，我看到轮播的样式取自 commons.css。这些样式是原始样式（未编辑）。我还在同一文件夹中编辑了 .less 和 .scss 文件，但轮播看起来还是一样。

好的。我将 slick.css、.less 和 .scss 文件重命名为随机名称。但旋转木马仍然保持着原来的样子。似乎这些文件不会影响任何东西。但！如果我删除这一行

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

整个轮播都坏了，好像根本没有css。

所以我想知道为什么它会这样工作？以及如何更改 React-Slick 轮播的样式？

Answer 1

如果你想让它工作，你需要从库中编辑 dist 文件夹。如果您从源而不是输出包进行编辑，则更改将不适用。

但是，如果您想编辑漂亮的样式，只需在您的应用中覆盖它们 css，不要编辑 node_modules 中的内容，强烈不建议这样做。（您可能需要添加一些 !important虽然）

CSS 文件中的更改不会影响 React-Slick

Changes in CSS-file don't affect React-Slick

node.js

slick

reactjs