Используйте `chromatic-sass` в проекте Vue (или сделайте любые функции JavaScript доступными в файлах / блоках Sass)

Question

Я хочу использовать chromatic-sass в приложении Vue, сгенерированном Vue CLI 3 (@vue/cli).

Однако chromatic-sass не записан в SASS, поэтому я не могу @import из файла .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 & rarr; Передача параметров в загрузчики препроцессора