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

Question

我是react-slick 的新手。我已按照安装说明进行操作，但 slider 没有附带 CSS 样式。我的 React 元素是通过 create-react-app 创建的。

slick.css 和 slick-theme.css 是导入的 styles.scss，这是我为导入 slick 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"
      }
    },
    ...

样式.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 模块重命名它们