将全局功能传递给手写笔文件

Question

我正在尝试定义一个函数，该函数将在我的所有.style文件中可用。例如，我可以写：

body
    background-image STATIC('/dist/assets/myImage.jpg')

应该输出

body {
  background-image: url('//localhost:3000/dist/assets/myImage.jpg')
}

在我的吞咽任务

gulp.task('stylus', function() {
  // host is defined in our config settings
  // i.e. for develpoment it will be "localhost:3000"
  var host = require('../../config').host;
  return gulp.src('src/main.styl')
    .pipe(stylus({
      define: {
        STATIC: function(file) {
          return 'url("//' + host + file.val + '")';
        }
      }
    }))
    .pipe(gulp.dest('build/dist/css'));
});

但是，当我运行gulp stylus时，会引用整个输出。如何返回没有第一个和最后一个单引号的完整路径？

body {
  background-image: 'url("//localhost:3000/dist/assets/myImage.jpg")';
}

Answer 1

要在所有styl文件中使用相同的函数，Stylus函数将更合适。您可以将手写笔中的功能定义为：

bodyCustomBg()
  body
    background-color white

并将函数用作：

bodyCustomBg()

您也可以在函数中传递参数。它将在您将要导入或需要包含函数的.style文件的文件中可用。