@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 выдаёт кучу ошибок. Как это решить?
  • Вопрос задан
  • 7124 просмотра
Пригласить эксперта
Ответы на вопрос 1
delphinpro
@delphinpro Куратор тега CSS
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';

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

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

Войти через центр авторизации
Похожие вопросы
19 апр. 2024, в 17:06
15000 руб./за проект
19 апр. 2024, в 16:53
1000 руб./за проект
19 апр. 2024, в 16:45
5000 руб./за проект