Question

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

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

应该输出

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

在我的gulp任务中

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

要在所有样式文件中使用相同的功能，手写笔功能将更合适。您可以将function in stylus定义为：

bodyCustomBg()
  body
    background-color white

并使用以下函数：

bodyCustomBg()

您也可以在functions中传递参数。它将在您要导入的文件中提供，或者需要包含该函数的.styl文件。

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

1 个答案: