Roots Sage 9 - 为生产构建返回错误的 sass mixin with yarn答案

【问题标题】：Roots Sage 9 - building for production returns error on sass mixin with yarnRoots Sage 9 - 为生产构建返回错误的 sass mixin with yarn
【发布时间】：2017-11-12 21:36:08
【问题描述】：

使用 Roots Sage 为 wordpress 构建主题。

尝试运行一个简单的 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;
     }
    }

并将其包含在一个类中：

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

在yarn run start 上，它将文件打包并在 browserfy 中可用。如果我尝试 yarn run build:production 我会收到以下错误：

模块构建失败：ModuleNotFoundError：找不到模块：错误：无法解析“../assets/images/test-logo-2x.png”

有什么想法吗？

【问题讨论】：

标签： wordpress webpack sass yarnpkg roots-sage

【解决方案1】：

在为生产构建时，地图结构会发生变化，并且需要更深入的查找。

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

应该是：

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

运行 yarn watch 时，Webpack 应该可以很好地转换这些图像。

【讨论】：