wordpresswebpacksassyarnpkgroots-sage

Roots Sage 9 - building for production returns error on sass mixin with yarn

building a theme with Roots Sage for wordpress.

Trying to run a simple retina mixin:

    @mixin imgRetina($image, $extension, $width, $height) {
      background: url($image + '.' + $extension) no-repeat;
      width: $width;
      height: $height;
    @media (min--moz-device-pixel-ratio: 1.3),
       (-o-min-device-pixel-ratio: 2.6/2),
       (-webkit-min-device-pixel-ratio: 1.3),
       (min-device-pixel-ratio: 1.3),
       (min-resolution: 1.3dppx) {     
            background-image: url($image + '-2x' + '.' + $extension) no-repeat;
            background-size: $width $height;
     }
    }

and include it on a class:

@include imgRetina('../assets/images/logo', png, 370px, 115px);

on yarn run start it packages the file and is available in browserfy. If I try and yarn run build:production I get the following error:

Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '../assets/images/test-logo-2x.png'

any ideas?

Solution

  • The map structure changes when building for production, and requires a deeper lookup.

    @include imgRetina('../assets/images/logo', png, 370px, 115px);

    should be:

    @include imgRetina('../../assets/images/logo', png, 370px, 115px);

    Webpack should convert those images fine when running yarn watch.