vite-plugin-yaml-ts-scss

A Vite plugin for importing YAML files as TypeScript objects or SCSS variables.

Installation

pnpm install --save-dev vite-plugin-yaml-ts-scss

Usage

// vite.config.ts
import { defineConfig } from "vite";
import YamlScssPlugin, { preprocessorOptions } from "vite-plugin-yaml-scss";

export default defineConfig({
  plugins: [YamlScssPlugin()],
  css: {
    preprocessorOptions: preprocessorOptions, //You need to add preprocessorOptions
  },
});

// variables.yaml
width: 300
height: 400

// main.ts
import size from "./variables.yaml";

console.log(size.width); // 300
console.log(size.height); // 400

// style.scss
@use "./variables.yaml" as size;

.app {
  width: size.$width + px;
  height: size.$height + px;
}