4

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

4

2 回答 2

6

显然,这些选项要与compass URL Helpers. 如果您已在 中指定imagesDirGruntfile.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/

于 2013-11-25T03:34:54.330 回答
0

我不确定它比文档更清晰

[imagesDir](https://github.com/gruntjs/grunt-contrib-compass#imagesdir)
Type: String
The directory where you keep your images.

[imagesPath](https://github.com/gruntjs/grunt-contrib-compass#imagespath)
Type: String
Default: images
The directory where the images are kept. It is relative to the projectPath.

也许Compass 的配置参考中的定义也会有帮助?

images_dir: The directory where the images are kept. It is relative to the project_path. Defaults to "images".

images_path: The full path to where images are kept. Defaults to <project_path>/<images_dir>.

您可以像 Gruntfile.js 中的任何其他选项一样指定这些:

compass: {
  staging: {
    options: {
      imagesDir: 'images'
    }
  }
}

注意:当您使用 compass image-url helper时,这些通常用于编译图像的正确路径。

于 2013-09-03T11:58:36.763 回答