什么是imagesDir& grunt-contrib-compass中的imagesPath？ [英] What's imagesDir & imagesPath in grunt-contrib-compass?

问题描述

我正在使用 grunt-contrib-compass ，在设置中，有诸如 imagesDir 和 imagesPath 。我只是想知道那是什么，我该如何使用它？

与指南针URL助手。如果您在 Gruntfile.js 中指定了 imagesDir ，则可以调用指南针函数 images-url（）来生成图片文件夹的路径。

例如，您可以如何指定 Gruntfile.js ：

 罗盘：{
构建：{
选项：{
 cssDir：'./source/css/'，
 sassDir：'./source/css/'，
 imagesDir：'./source/images/'，
 force：true，
 outputStyle：'expanded'，
} 
 
 
 
 
 $ b $ p 
 $ b 
这就是你如何从你的 scss  file：
  background-image：image-url（'test。 png'）; 
  
运行任务时，它将被编译为：
  background-image：url（'/./ source / images / test.png'）; 
  
同样的事情适用于 fontsDir ，你只是需要调用不同的指南针函数 font-url（）。如果您想了解更多详情，请点击链接 http：//指南针风格。 org / reference / compass / helpers / urls /   
I'm using grunt-contrib-compass, in the settings, there are options like imagesDir and imagesPath. I'm just wondering what's that for, and how do I use it?
解决方案
So apparently that options to be used in conjunction with compass URL Helpers. If you've specified imagesDir in your Gruntfile.js, you can call a compass function images-url() to generate the path to your images folder. 

For example, this is how you specify the Gruntfile.js:
compass: {
  build: {
    options: {
      cssDir: './source/css/',
      sassDir: './source/css/',
      imagesDir: './source/images/',
      force: true,
      outputStyle: 'expanded',
    }
  }
}
And this is how you call the function from your scss file:
background-image: image-url( 'test.png' );
When you run the task, it'll be compiled into:
background-image: url('/./source/images/test.png');
Same thing applies for fontsDir, you just need to call different compass function font-url(). If you want to find more details, please follow the link http://compass-style.org/reference/compass/helpers/urls/

                        
这篇关于什么是imagesDir& grunt-contrib-compass中的imagesPath？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！