时间戳

首页 > 解决方案 > 在 react-slick 中，className 与 webpack css-loader 转换的 CSS 文件中的类名不匹配

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

问题描述

我很陌生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"
      }
    },
    ...

样式.scss

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

标签： cssreactjswebpack

解决方案

在你的 style.scss 文件中放这个

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

添加:global将阻止 css 模块重命名它们

推荐阅读