when importing css getting error: BrowserslistError: Unknown browser query `dead`

[maxkopych]

When trying to import css:

import "@fancyapps/ui/dist/fancybox.css";

I'm getting error

./node_modules/@fancyapps/ui/src/Fancybox/Fancybox.scss (./node_modules/css-loader??ref--2-1!./node_modules/postcss-loader/lib??ref--2-2!./node_modules/sass-loader/lib/loader.js??ref--2-3!./node_modules/@fancyapps/ui/src/Fancybox/Fancybox.scss)
Module build failed (from ./node_modules/postcss-loader/lib/index.js):
BrowserslistError: Unknown browser query `dead`

.browserslistrc:

>0.2%

package.json:

    "postcss-cssnext": "^3.1.0",
    "postcss-loader": "2.0.6",
    "postcss-smart-import": "0.7.6",

[fancyapps]

Hi,

Please, upgrade to v5.

[maxkopych]

after upgrade to v5 it's stop working in vue2. Is it any instruction for that?

[fancyapps]

Hi, I don't know what problem you have, but you can always import Fancybox files directly into your page.

[maxkopych]

Sorry for not providing more details. for v4 version I have code. Initialization:

import {Fancybox} from "@fancyapps/ui/src/Fancybox/Fancybox.js";
Fancybox.bind(".slick-slide:not(.slick-cloned) .fancybox", {
    groupAll: true,
    Toolbar: {
        display: [
            { id: "prev", position: "center" },
            { id: "counter", position: "center" },
            { id: "next", position: "center" },
            "close",
        ],
    },
    Thumbs: {
        autoStart: true,
    },
})

And then in vue template I just add attributes to element:

<Slider :options="sliderOptions">
    <div
        v-for="slide in data.slides"
        data-fancybox="video-gallery"
        :data-src="slide.video_url"
        class="mkSlide px-2"
        :class="slide.type"
        :data-thumb="getThumbURL(slide)"
    >
        <div class="imgBox" :style="{backgroundImage: getThumbURL(slide, true)}">
            <div class="videoLink"><img :src="playButton"/></div>
        </div>
    </div>
</Slider>

So after upgrade I just updated import code to:

import { Fancybox } from "@fancyapps/ui/dist/fancybox/fancybox.esm.js";
import "@fancyapps/ui/dist/fancybox/fancybox.css";

But I just found this instruction it's look like in v5 I have to manually init Fancybox on each mount? I think previous it was observing DOM changes?

[fancyapps]

Yes, you have to tell Fancybox to listen for click events as described here - https://fancyapps.com/fancybox/getting-started/#option-1-declarative

This way you can set custom options for each component individually:

Fancybox.bind(REFERENCE_TO_YOUR_CONTAINER, "[data-fancybox]", {
  // Your custom options
});