什么是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屋!