vue.js - 在 Vue 项目中使用 `chromatic-sass`(或使任何 JavaScript 函数在 Sass 文件/ block 中可用)

Question

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

然而，chromatic-sass不是用 SASS 编写的，所以我不能 @import它来自 .scss文件或 <style lang="scss">堵塞。因为它是用 JavaScript(准确地说是 CoffeeScript)编写的，所以需要通过配置 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