gruntjs - grunt-contrib-compass 中的 imagesDir 和 imagesPath 是什么？

Question

我正在使用 grunt-contrib-compass ，在设置中，有imagesDir之类的选项和 imagesPath .我只是想知道这是做什么用的，我该如何使用它？

Answer 1

显然，这些选项要与 compass URL Helpers 一起使用.如果您指定了 imagesDir在您的 Gruntfile.js ，您可以调用compass功能 images-url()生成图像文件夹的路径。

例如，这是您指定 Gruntfile.js 的方式。 :

compass: {
  build: {
    options: {
      cssDir: './source/css/',
      sassDir: './source/css/',
      imagesDir: './source/images/',
      force: true,
      outputStyle: 'expanded',
    }
  }
}

这就是您从 scss 调用函数的方式。文件:

background-image: image-url( 'test.png' );

当你运行任务时，它会被编译成:

background-image: url('/./source/images/test.png');

同样适用于 fontsDir ，您只需要调用不同的 compass功能 font-url() .如果您想了解更多详情，请点击链接 http://compass-style.org/reference/compass/helpers/urls/