css - 如何设置图像宽度的解析路径？

Question

我有一个指向绝对位置的 LESS 文件(它需要是绝对位置，否则 grunt-usemin 将无法正确解析它)，但这会导致 less 编译器在处理时无法解析图像 图像宽度()。

/client/app/app.less

// logo is located at /client/assets/images/ but "/client" is the 
// web root, which is why the absolute reference is "/assets/images"
@logo-url: '/assets/images/web-header-111_253x45.gif';
@logo-width: image-width(@logo-url);
@logo-height: image-height(@logo-url);

.web-header {
    width: @logo-width;
    height: @logo-height;
    background: url(@logo-url);
}

/gruntfile.js

  grunt.initConfig({

    /* TRIMMED */

    less: {
      options: {
      },
      server: {
        files: [{
          src: ['client/app/app.less'],
          dest: '.tmp/app/app.css'
        }]
      }
    }

    /* TRIMMED */
  });

以上将抛出以下构建错误:

Warning: Running "less:server" (less) task
>> RuntimeError: error evaluating function `image-width`: ENOENT, no such file or directory 'C:\git\www-project\client\app\assets\images\web-header-111_2
53x45.gif' in client\app\app.less on line 26, column 14:
>> 25 @logo-url: '/assets/images/web-header-111_253x45.gif';
>> 26 @logo-width: image-width(@logo-url);
>> 27 @logo-height: image-height(@logo-url);
Warning: Error compiling client/app/app.less Use --force to continue.

Aborted due to warnings.

问题: 我可以设置什么来使 image-width(...) 相对于 C:\git\www-project\client 目录而不是包含 app.less 的目录进行解析？

Answer 1

如果我同时设置绝对 URL 路径并计算相对文件路径，则可以毫无问题地解析 image-width(...) 路径。

// logo is located at /client/assets/images/ but "/client" is the 
// web root, which is why the absolute reference is "/assets/images"
@root: '..';
@logo-url: '/assets/images/web-header-111_253x45.gif';
@logo-path: '@{root}@{logo-url}';
@logo-width: image-width(@logo-path);
@logo-height: image-height(@logo-path);

.web-header {
    width: @logo-width;
    height: @logo-height;
    background: url(@logo-url);
}