В реакции-слике className не совпадает с именами классов в файлах CSS, преобразованных с помощью веб-пакета css-loader.

Question

Я очень новичок в react-slick.Я следовал инструкции по установке, но слайдер не поддерживает стили CSS.Мой проект React был создан create-реагировать-приложение.

slick.css и slick-theme.css являются импортированными styles.scss, который является файлом, который я сделал для импорта гладких CSS-файлов.Как вы видите, мой css-загрузчик настроен в webpack.config.js, имена классов должны быть изменены следующим образом 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 переименовать их