Roots Sage 9 - 为生产而构建 returns 在 sass 与纱线混合时出错
Roots Sage 9 - building for production returns error on sass mixin with yarn
使用 Roots Sage 为 wordpress 构建主题。
尝试运行一个简单的视网膜混合:
@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;
}
}
并将其包含在 class 中:
@include imgRetina('../assets/images/logo', png, 370px, 115px);
在 yarn run start
它打包文件并在 browserfy 中可用。如果我尝试 yarn run build:production
我会收到以下错误:
Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '../assets/images/test-logo-2x.png'
有什么想法吗?
为生产而构建时地图结构发生变化,需要更深入的查找。
@include imgRetina('../assets/images/logo', png, 370px, 115px);
应该是:
@include imgRetina('../../assets/images/logo', png, 370px, 115px);
当 运行 yarn watch 时,Webpack 应该可以很好地转换这些图像。
使用 Roots Sage 为 wordpress 构建主题。
尝试运行一个简单的视网膜混合:
@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;
}
}
并将其包含在 class 中:
@include imgRetina('../assets/images/logo', png, 370px, 115px);
在 yarn run start
它打包文件并在 browserfy 中可用。如果我尝试 yarn run build:production
我会收到以下错误:
Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '../assets/images/test-logo-2x.png'
有什么想法吗?
为生产而构建时地图结构发生变化,需要更深入的查找。
@include imgRetina('../assets/images/logo', png, 370px, 115px);
应该是:
@include imgRetina('../../assets/images/logo', png, 370px, 115px);
当 运行 yarn watch 时,Webpack 应该可以很好地转换这些图像。