在 Vue 项目中使用 `chromatic-sass`（或使任何 JavaScript 函数在 Sass files/blocks 中可用）

Question

我想使用 chromatic-sass in a Vue application generated by the Vue CLI 3 (@vue/cli).

但是，chromatic-sass 没有写在 SASS 中，所以我不能从 .scss 文件或 <style lang="scss"> 块中 @import 它。因为它是用 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

在 Vue 项目中使用 `chromatic-sass`（或使任何 JavaScript 函数在 Sass files/blocks 中可用）

Use `chromatic-sass` in a Vue project (or make any JavaScript functions available in Sass files/blocks)

sass

node-sass

vue.js

vue-cli-3