如何在 grunt-sass 中使用函数？

Question

我当前的项目使用 grunt-sass 将 scss 个文件翻译成 css。根据 grunt-sass 文档，我可以使用 node-sass 提供的任何选项，除了几个：

Options

See the node-sass options, except for file, outFile, success, error.

我的项目从一个 SCSS 文件中编译出两个 CSS 文件。 SCSS 文件中有 if 语句，根据版本变量的值提供不同的代码 ($bootstrap-version: 3; 或 $bootstrap-version: 4; ).

我想使用 node-sass 选项 functions 到 return 我的 SCSS 文件的 bootstrap 版本。

这是我的 gruntfile。 functions: {...} 路径是我期望选项的工作方式。

// Compile Sass
sass: {
bootstrap3: {
    options: {
      style: 'expanded'
      functions: {getBootstrapVersion: function(){return 3;}}
    },
    files: {
      'dist/bootstrap3/css/my-bs3-variation.css': './bootstrap3/scss/my-bs3-variation.scss'
    },
},
bootstrap4: {
    options: {
      style: 'expanded',
      functions: {getBootstrapVersion: function(){return 4;}}
    },
    files: {
      'dist/bootstrap4/css/my-bs4-variation.css': './bootstrap4/scss/my-bs4-variation.scss'
    }
}

在SCSS文件中，我这样调用函数：

$bootstrap-version: getBootstrapVersion();

h1:before {
    content: "Bootstrap " + $bootstrap-version + " Version of ";
}

但是，在尝试编译它时，我在调用该函数的那一行得到了错误 >> Error: error in C function getBootstrapVersion: A SassValue object was expected.。

node-sass 文档中的示例对我帮助不大。我做错了什么？还是有我没有找到的更好的例子？

我使用 grunt-sass 版本 2.0.0 和 node-sass 版本 4.7.2

Answer 1

函数必须 return 一个 SassValue 对象。

不幸的是，我认为单独使用 grunt-sass 是不可能做到这一点的，因为我们需要将您的 returned 数字 4 和 3 包装在node-sass 中定义的输入函数（grunt-sass 不公开...）。

例如，node-sass 在 javascript 中，可以使用类似 sass.types.Number(4) 将 4 声明为数字 SassValue.

这里，sass是node-sass导入const sass = require('node-sass');，在grunt中是没有的...

如何在 grunt-sass 中使用函数？

How to use functions in grunt-sass?

sass

gruntjs

node-sass