@miniven

Как импортировать Swiper при помощи Webpack?

Пробую добавить библиотеку Swiper таким образом:
import Swiper from 'swiper';

Ошибок нет, js-модуль добавляется, а вот css почему-то отсутствует.

В webpack.config.js:
module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: [
            { 
              loader: 'css-loader',
              options: {
                modules: false
              } 
            },
            { loader: 'postcss-loader' }
          ],
          fallback: 'style-loader'
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({
    filename: "./styles/[name].css",
      disable: process.env.NODE_ENV === "development"
    })
  ]
};


Пробовал импортировать в css-файле, получаю ошибку:
ERROR in ./node_modules/css-loader??ref--0-2!./node_modules/postcss-loader/lib!./app/styles/main.css
    Module build failed: Error: Failed to find 'swiper'


Пробовал указать путь swiper/dist/css/swiper.css, и тогда файл подтягивается, но stylelint выдаёт кучу ошибок. Как это решить?
  • Вопрос задан
  • 178 просмотров
Пригласить эксперта
Ответы на вопрос 1
dpr
@dpr
frontend developer
Всё правильно. Css нужно импортировать отдельно. В js.

import Swiper from 'swiper';
import '../node_modules/swiper/dist/css/swiper.css';

Css-loader у вас вроде подключен

Можно алиас прописать в конфиге

'swiper.css' : 'node_modules/swiper/dist/css/swiper.css'


и импортировать покороче

import 'swiper.css';

Но вряд ли стоит заморачиваться ради единственного импорта
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
от 40 000 до 80 000 руб.
Biganto Москва
от 130 000 до 130 000 руб.
Reklama Guru Санкт-Петербург
от 50 000 до 60 000 руб.
22 авг. 2018, в 08:57
113 руб./за 1000 зн.
22 авг. 2018, в 08:50
10000 руб./за проект
22 авг. 2018, в 06:57
150 руб./в час