ルーツセージ9 - 生産のための建物は、糸とミックスミキサーでエラーを返します

Question

wordpressのRoots Sageでテーマを構築します。

@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; 
    } 
    } 

、それがクラスに含まれます：

は、単純な網膜のミックスインを実行しようとすると yarn run startに

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

それはファイルをパッケージ化し、browserfyで利用可能です。私がしようとyarn run build:production場合、私は次のエラーを取得する：

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

任意のアイデア？

Answer 1

生産のためにビルドするときにマップ構造が変更され、より深いルックアップが必要です。

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

は次のようになります。糸の時計を実行しているとき

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

WebPACKの罰金これらの画像を変換する必要があります。