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

Question

[miniven]

Пробую добавить библиотеку 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 выдаёт кучу ошибок. Как это решить?

Answer 1

[Сергей delphinpro]

Всё правильно. 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';

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

Comments

[miniven]

Ну хорошо. А что тогда можно сделать, чтобы stylelint не проверял его?
До этого я импортировал normalize.css прям в css, все получилось и stylelint на него не реагирует. Подключал вот так (использую postCSS):

@import 'normalize.css';

А вот подключить swiper также у меня не получается

[Сергей delphinpro]

miniven, Добавить в игнорфайлс

[Сергей delphinpro]

или в .stylelintignore

[thehighhomie]

Не нужно добавлять css файл в js. Нужно все вендоры, добавлять именно в файл стилей, там все просто, если хотите то вот возьмите пример https://github.com/roots/sage.

Но swiper написан на less, то есть если вы используете sass то появляется проблема, а именно - подключать нужно как раз-таки скомпилированный css файл. Можно как описал человек выше, но как по мне, лучше создать отдельный файл (или даже папку, как вам удобнее) к примеру для вендора и подключать все вендоры туда, ну а в стайл линте игнор на него.

[thehighhomie]

и кстати, подключать файлы из node_modules в sass/css файлах можно так:
@import "~bootstrap/scss/bootstrap";

[Сергей delphinpro]

thehighhomie, Да не суть. Суть в том, что подключать css нужно отдельно. а куда вы его клеить — дело ваше, хоть в свой бандл, хоть в отдельный с вендорами.
Лично у меня сборщик читает отдельную секцию в package.json, где собраны все вендоры и собирает их отдельно. s.delphinpro.ru/20180225-201158.png

[thehighhomie]

Сергей, а вот это уже отличное решение, как по мне

[thehighhomie]

Сергей, вы подскажете как такое сделать?

[Сергей delphinpro]

thehighhomie, https://github.com/delphinpro/gulp-starter

[thehighhomie]

Сергей, так у вас gulp сборка как я понял, на вебпаке такое вариант сделать?

[thehighhomie]

Сергей, о, вижу, придется разбираться...

[Сергей delphinpro]

thehighhomie, ну в общем-то скрипты вебпаком обрабатываются.
https://github.com/delphinpro/gulp-starter/blob/ma...
Вот здесь читается секция и вендоры собираются.
На чистый вебпак можно легко перепилить, если суть уловить )

[thehighhomie]

Сергей, я понял код проходит циклом по зависимостям и кидает все в entry. мне не понятны только объекты "webpack" и alias в package.json

[Сергей delphinpro]

thehighhomie, ну это мои кастомные секции. alias - это поле aliаs в конфиге webpack, без изменений (вынес в package.json чтобы не прикасаться к vendor.webpack.config.js при настройке). bundles - описаны отдельные бандлы, каждый будет собран в отдельный файл на выходе (т.е. по дефолту у меня три бандла - vendor, legacy и main). Бандлы можно опустить, тогда все из dependencies будет собрано в vendor.
Вроде так там )

[thehighhomie]

Сергей, ок) спасибо)

[thehighhomie]

Сергей, если вы в webpack'е тоже хорошо разбираетесь, то прошу вас сюда :)