Question

我是react-slick的新手。我已经按照安装说明进行操作，但是滑块没有CSS样式。我的React项目是由create-react-app创建的。

slick.css和slick-theme.css是导入的styles.scss，这是我用来导入光滑CSS文件的文件。如您所见，我在webpack.config.js中设置了css-loader，应该在localIdentName之后更改类名。

因此，类名在CSS中转换，而我在HTML中的类名保持不变。因此，它们不匹配。我该如何搭配？

webpack.config.dev.js

test: /\.(css|scss)$/,
  use: [
    require.resolve("style-loader"),
    {
      loader: require.resolve("css-loader"),
      options: {
        importLoaders: 1,
        modules: true,
        localIdentName: "[path][name]__[local]--[hash:base64:5]",
        camelCase: "dashes"
      }
    },
    ...

styles.scss

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

Answer 1

在您的style.scss文件中放入

:global {
    @import 'node_modules/slick-carousel/slick/slick';
}

添加:global将阻止CSS模块对其重命名

在react-slick中，className与由webpack css-loader转换的CSS文件中的类名不匹配

1 个答案: