Invalid CSS after "... to add 76px /": expected 1 selector or at-rule, was "_::full-page-media,"

[Romchik]

// app.css

@import "node_modules/vegas/src/sass/vegas";

// webpack.mix.js

mix
    .scripts(
        [
            'node_modules/jquery/dist/jquery.js',
            'node_modules/bootstrap-sass/assets/javascripts/bootstrap.js',
            'node_modules/vegas/dist/vegas.js',
            'resources/assets/js/main.js',
        ],
        'public/js/all.js'
    )
    .sass('resources/assets/sass/app.scss', 'public/css')
    .version();

Wenn I run 'npm production' (webpack command from Laravel 5.4):

Module build failed:
/* Target Safari IOS7+ in order to add 76px */
Invalid CSS after "... to add 76px */": expected 1 selector or at-rule, was "_::full-page-media,"
in /node_modules/vegas/src/sass/main/vegas.sass (line 63, column 47)

It's possible to fix it?

[sebastiansulinski]

The problem is with the node_modules/vegas/src/sass/main/vegas.scss, which uses iOS Safari hack - I'm not sure it is still needed, but the get rid of the problem you can remove the following form the end of this file:

/* Target Safari IOS7+ in order to add 76px */
_::full-page-media, _:future,
:root body.vegas-container > .vegas-slide,
:root body.vegas-container > .vegas-overlay
    bottom: -76px

[fwermelinger]

This hack also affects Asp.net MVC. When adding the CSS with the Frameworks CSS bundler it will throw an "index out of range" exception because it doesn't know the _: selector.

Microsoft.Ajax.Utilities.CssParser has a problem with _: css selector.

https://stackoverflow.com/a/26696078/1838774

[EmperorArthur]

I can confirm this is still an issue, and have opened a pull request to remove the offending code.