Используйте `chromatic-sass` в проекте Vue (или сделайте любые функции JavaScript доступными в файлах / блоках Sass)
Я хочу использовать chromatic-sass в приложении Vue, созданном с помощью Vue CLI 3 (@vue/cli).
Однако chromatic-sass не записан в SASS, поэтому я не могу записать его из файла @import или блока .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 у меня нет доступа или контроля над тем, как используется <style lang = "scss">.
Как проще всего заставить node-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
Ответы 1
Вам просто нужно передать необходимые параметры препроцессору SASS.
vue.config.js:
const chromatic = require('chromatic-sass');
module.exports = {
css: {
loaderOptions: {
sass: {
functions: chromatic
}
}
}
};
Я протестировал его на недавно созданном проекте, используя ваши настройки, и он работает должным образом.
Документация: Vue CLI 3 → Передача параметров загрузчикам препроцессора
Я очень благодарен. ?Я подозревал, что решение было простым, но по какой-то причине файлы конфигурации для меня совершенно непреодолимы. Большое спасибо.