How to import Swiper with Webpack?

Question

css

I try to add the Swiper library in this way: There are no errors, the js-module is added, but for some reason the css is missing. In webpack.config.js:
import Swiper from 'swiper';

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"
    })
  ]
};

I tried to import in css file, I get an error:

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'

I tried to specify the path swiper/dist/css/swiper.css, and then the file is pulled up, but stylelint gives a bunch of errors. How to solve it?

Answer 1

Everything is correct. CSS needs to be imported separately. in js.

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

Css-loader seems to be connected to you.
You can register an alias in the config
and import shorter