Реагируйте с помощью CSS-модулей - PullRequest
Новая
       10

Реагируйте с помощью CSS-модулей

0 голосов
/ 24 июня 2018

Я использую webpack с модулями css для своего проекта, и я попытался установить популярный пакет реакции-слик для создания слайдера. Он отлично работает в песочнице, но в оригинальном проекте у меня есть некоторые трудности Когда я пытаюсь импортировать slick.css и slick-theme.css, как указано в документации , я получаю следующую ошибку: 

Module not found: Can't resolve '~slick-carousel/slick/slick-theme.css'

Что я уже пытался избежать этого:

1

Я установил 

npm install file-loader url-loader --save

Обновил мой webpack.config.js, добавив следующий раздел 

  {
    test: /\.scss$/,
    loader:
      "style!css!sass?outputStyle=expanded&" +
      "includePaths[]=" +
      path.resolve(__dirname, "./node_modules")
  }

не работал

2

Заменены 

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

с 

import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

не работал

3

Я вручную загрузил эти два файла .css в свой проект и импортировал их прямо из папки.

Не работает.

Что я должен сделать, чтобы решить эту проблему?

1 Ответ

0 голосов
/ 24 июня 2018

Вам также необходимо установить slick-carousel.
react-slick - это только часть библиотеки Javascript, slick-carousel - это часть css.

Согласно DOCS : 

npm install slick-carousel
@import "~slick-carousel/slick/slick.css";
@import "~slick-carousel/slick/slick-theme.css";

Обновление
Этот импорт находится внутри файла CSS, обратите внимание на @ перед путем.

Так, например,у вас есть файл myStyles.css, и вы можете импортировать стили slick-carousel.

...