在Vue项目中使用`chro状- Sass‘(或使Sass文件/块中的任何JavaScript函数可用)

Question

我希望在Vue CLI 3 (@vue/cli)生成的Vue应用程序中使用@vue/cli。

但是，chromatic-sass不是用SASS编写的，所以我不能从.scss文件或<style lang="scss">块中编写它。因为它是用JavaScript编写的(确切地说，是用CoffeeScript编写的)，所以需要通过配置SASS呈现程序来桥接它。

下面是一个项目的文档建议如何集成它：

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→将选项传递给预处理器加载程序