在 Vue 项目中使用 `chromatic-sass`（或在 Sass 文件/块中使用任何 JavaScript 函数）

Question

我想在 Vue CLI 3 (@vue/cli) 生成的 Vue 应用程序中使用 chromatic-sass。

但是，chromatic-sass 不是用 SASS 编写的，所以我不能从 .scss 文件或 <style lang="scss"> 块中 @import 它。因为它是用 JavaScript 编写的（确切地说是咖啡脚本），所以需要通过配置 SASS 渲染器来桥接它。

这里是how the docs recommend integrating it 进入一个项目：

var sass = require("node-sass");
var chromatic = require("chromatic-sass");

sass.render({
  file: scss_filename,
  functions: chromatic
}, function(err, result) { /*...*/ });

问题是，在使用 Vue CLI 时，我无法访问或控制 node-sass 的使用方式。

让chromatic-sass 在 Vue CLI 生成的项目中工作的最简单方法是什么？这可以通过修改配置文件来实现吗？

---

我希望得到一个完整的答案（工作代码），而不是为我指明一个方向。该解决方案不应以其他方式修改 Vue 处理 SCSS 文件的方式。

如果重要的话，我使用的 Vue CLI 设置：

Vue CLI v3.3.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?: In dedicated config files 

Answer 1

您应该只将所需的选项传递给 SASS 预处理器。

vue.config.js：

const chromatic = require('chromatic-sass');

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        functions: chromatic
      }
    }
  }
};

我已经使用您的设置在新创建的项目上对其进行了测试，它按预期工作。

文档：Vue CLI 3 → Passing Options to Pre-Processor Loaders