Question

我有一个LESS文件引用一个绝对位置（它需要是绝对的或grunt-usemin不会正确解析它），但是这会导致较少的编译器在处理时无法解析图像{{ 1}}。

/client/app/app.less

image-width()

/gruntfile.js

// 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);
}

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

  grunt.initConfig({

    /* TRIMMED */

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

    /* TRIMMED */
  });

问题：我可以设置什么来使图像宽度（...）相对于C：\ git \ www-project \ client目录而不是包含app.less的目录解析？

Answer 1

如果我同时设置绝对网址路径＆amp;计算相对文件路径，然后可以毫无问题地解析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);
}

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

1 个答案: